webGis 气象站点数据解析渲染

news2024/12/26 19:24:21

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);