webGis 气象站点数据解析渲染
1.站点数据说明
1.1 数据来源
站点数据来源多样。
1.2数据传输
实现前端的展示，数据传输的方式有：
- json
- 等等
1.2数据格式
let arr = [{
lat:1,//经纬度
lng:1,
value:2//值
},{},...]1.3站点数据转格点数据
- turf.interpolate
- 克里金插值
- qgis等IDE工具
- 其他
1.4数据渲染（二三维）
- kriging.js直接训练,然后x渲染成canvas，三维渲染的话贴图。
let points = [];
demodata.data.forEach((item) => {
points.push(turf.point([item[0], item[1]], { value: item[2] }));
});
var collection = turf.featureCollection(points, {});
var canvas = document.getElementById("canvasMap");
canvas.width = 2000;
canvas.height = 2000;
var n = collection.features.length;
var t = [];
var x = [];
var y = [];
for (var i = 0; i < n; i++) {
t.push(collection.features[i].properties.value); // 权重值
x.push(collection.features[i].geometry.coordinates[0]); // x
y.push(collection.features[i].geometry.coordinates[1]); // y
}
var variogram = kriging.train(t, x, y, "exponential", 0, 10);
console.log(t, x, y, variogram);
var grid = kriging.grid(
[
[
[123.337734306, 41.826277622],
[123.37805956, 41.826204534],
[123.378038616, 41.802883463],
[123.337713376, 41.802956548],
[123.337734306, 41.826277622],
],
],
variogram,
0.0001
);
console.log(grid);
let colors = [
"#00A600",
"#01A600",
"#03A700",
"#04A700",
"#05A800",
"#07A800",
"#08A900",
"#09A900",
"#0BAA00",
"#0CAA00",
"#0DAB00",
"#0FAB00",
"#10AC00",
"#12AC00",
"#13AD00",
"#14AD00",
"#16AE00",
"#17AE00",
"#19AF00",
"#1AAF00",
"#1CB000",
"#1DB000",
"#1FB100",
"#20B100",
"#22B200",
"#23B200",
"#25B300",
"#26B300",
"#28B400",
"#29B400",
"#2BB500",
"#2CB500",
"#2EB600",
"#2FB600",
"#31B700",
"#33B700",
"#34B800",
"#36B800",
"#37B900",
"#39B900",
"#3BBA00",
"#3CBA00",
"#3EBB00",
"#3FBB00",
"#41BC00",
"#43BC00",
"#44BD00",
"#46BD00",
"#48BE00",
"#49BE00",
"#4BBF00",
"#4DBF00",
"#4FC000",
"#50C000",
"#52C100",
"#54C100",
"#55C200",
"#57C200",
"#59C300",
"#5BC300",
"#5DC400",
"#5EC400",
"#60C500",
"#62C500",
"#64C600",
"#66C600",
"#67C700",
"#69C700",
"#6BC800",
"#6DC800",
"#6FC900",
"#71C900",
"#72CA00",
"#74CA00",
"#76CB00",
"#78CB00",
"#7ACC00",
"#7CCC00",
"#7ECD00",
"#80CD00",
"#82CE00",
"#84CE00",
"#86CF00",
"#88CF00",
"#8AD000",
"#8BD000",
"#8DD100",
"#8FD100",
"#91D200",
"#93D200",
"#95D300",
"#97D300",
"#9AD400",
"#9CD400",
"#9ED500",
"#A0D500",
"#A2D600",
"#A4D600",
"#A6D700",
"#A8D700",
"#AAD800",
"#ACD800",
"#AED900",
"#B0D900",
"#B2DA00",
"#B5DA00",
"#B7DB00",
"#B9DB00",
"#BBDC00",
"#BDDC00",
"#BFDD00",
"#C2DD00",
"#C4DE00",
"#C6DE00",
"#C8DF00",
"#CADF00",
"#CDE000",
"#CFE000",
"#D1E100",
"#D3E100",
"#D6E200",
"#D8E200",
"#DAE300",
"#DCE300",
"#DFE400",
"#E1E400",
"#E3E500",
"#E6E600",
"#E6E402",
"#E6E204",
"#E6E105",
"#E6DF07",
"#E6DD09",
"#E6DC0B",
"#E6DA0D",
"#E6D90E",
"#E6D710",
"#E6D612",
"#E7D414",
"#E7D316",
"#E7D217",
"#E7D019",
"#E7CF1B",
"#E7CE1D",
"#E7CD1F",
"#E7CB21",
"#E7CA22",
"#E7C924",
"#E8C826",
"#E8C728",
"#E8C62A",
"#E8C52B",
"#E8C42D",
"#E8C32F",
"#E8C231",
"#E8C133",
"#E8C035",
"#E8BF36",
"#E9BE38",
"#E9BD3A",
"#E9BC3C",
"#E9BB3E",
"#E9BB40",
"#E9BA42",
"#E9B943",
"#E9B945",
"#E9B847",
"#E9B749",
"#EAB74B",
"#EAB64D",
"#EAB64F",
"#EAB550",
"#EAB552",
"#EAB454",
"#EAB456",
"#EAB358",
"#EAB35A",
"#EAB35C",
"#EBB25D",
"#EBB25F",
"#EBB261",
"#EBB263",
"#EBB165",
"#EBB167",
"#EBB169",
"#EBB16B",
"#EBB16C",
"#EBB16E",
"#ECB170",
"#ECB172",
"#ECB174",
"#ECB176",
"#ECB178",
"#ECB17A",
"#ECB17C",
"#ECB17E",
"#ECB27F",
"#ECB281",
"#EDB283",
"#EDB285",
"#EDB387",
"#EDB389",
"#EDB38B",
"#EDB48D",
"#EDB48F",
"#EDB591",
"#EDB593",
"#EDB694",
"#EEB696",
"#EEB798",
"#EEB89A",
"#EEB89C",
"#EEB99E",
"#EEBAA0",
"#EEBAA2",
"#EEBBA4",
"#EEBCA6",
"#EEBDA8",
"#EFBEAA",
"#EFBEAC",
"#EFBFAD",
"#EFC0AF",
"#EFC1B1",
"#EFC2B3",
"#EFC3B5",
"#EFC4B7",
"#EFC5B9",
"#EFC7BB",
"#F0C8BD",
"#F0C9BF",
"#F0CAC1",
"#F0CBC3",
"#F0CDC5",
"#F0CEC7",
"#F0CFC9",
"#F0D1CB",
"#F0D2CD",
"#F0D3CF",
"#F1D5D1",
"#F1D6D3",
"#F1D8D5",
"#F1D9D7",
"#F1DBD8",
"#F1DDDA",
"#F1DEDC",
"#F1E0DE",
"#F1E2E0",
"#F1E3E2",
"#F2E5E4",
"#F2E7E6",
"#F2E9E8",
"#F2EBEA",
"#F2ECEC",
"#F2EEEE",
"#F2F0F0",
"#F2F2F2",
];
kriging.plot(canvas, grid, grid.xlim, grid.ylim, colors);
function returnImgae() {
var mycanvas = document.getElementById("canvasMap");
return mycanvas.toDataURL("image/png");
}
let coords = [
[123.337734306, 41.826277622],
[123.37805956, 41.826204534],
[123.378038616, 41.802883463],
[123.337713376, 41.802956548],
];
let arr = [];
for (let item of coords) {
arr.push(...item);
}
// console.log(arr);
var temptureLayer = viewer.entities.add({
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([...arr]),
},
// material: new Cesium.ColorMaterialProperty(
// Cesium.Color.CORNSILK.withAlpha(1)
// ),
material: new Cesium.ImageMaterialProperty({
image: returnImgae(), //使用贴图的方式将结果贴到面上
}),
},
});- turf.interpolate 转为格点数据后使用格点数据渲染，另一章文章中有。
var points = turf.randomPoint(30, { bbox: [50, 30, 70, 50] });
// add a random property to each point
turf.featureEach(points, function (point) {
point.properties.solRad = Math.random() * 50;
});
var options = { gridType: "points", property: "solRad", units: "miles" };
var grid = turf.interpolate(points, 100, options);- 其他方式，以后补充
原文地址：https://blog.csdn.net/weiweiweb888/article/details/144104766
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！