cesium可视化(二)：全国温度图

1、概述

通过克里金法插值的方式将数据在cesium上进行插值渲染，实现了根据温度值渲染出热力图的效果。

2、代码实现

//添加温度图
let temptureLayer = null;
let extent = {"xmin": 73.4766, "xmax": 135.088, "ymin": 18.1055, "ymax": 53.5693};
const addKriging = (features,bounds,colors) => {
    //获取插值绘制图片--features为geojson数据, bounds为已定义好的边界, colors为已定义好的颜色值
    let image = loadkriging(features, bounds, colors);
    //添加图片到cesium
    temptureLayer = viewer.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
            url: url,
            rectangle: new Cesium.Rectangle(
                Cesium.Math.toRadians(extent.xmin),
                Cesium.Math.toRadians(extent.ymin),
                Cesium.Math.toRadians(extent.xmax),
                Cesium.Math.toRadians(extent.ymax)
            )
        })
    );
    temptureLayer.alpha = 0.4;
}
//根据 克里金法 插值绘制图片
const loadkriging = (tempture, bounds, colors) => {
      let canvas = document.createElement("canvas");
      canvas.width = 2000;
      canvas.height = 2000;
      let t = [];
      let x = [];
      let y = [];
      for (let i = 0, len = tempture.length; i < len; i++) {
        t.push(tempture[i].properties.Temperatur); // 权重值
        x.push(tempture[i].geometry.coordinates[0]); // x
        y.push(tempture[i].geometry.coordinates[1]); // y
      }
      //Kriging为引入的三方js库
      kriging = new Kriging();
      //1、模型训练--权重数组、经度数组、纬度数组、训练模型类型
      let variogram = kriging.train(t, x, y, "exponential", 0, 100);
      //2、生成网格--网格边界、训练得到模型、分辨率
      let grid = kriging.grid(bounds, variogram, 0.05);
      //3、绘制结果--画布、插值生成网格、经度范围、纬度范围、颜色范围
      kriging.plot(canvas, grid, [73.4766, 135.088], [18.1055, 53.5693], colors);
      let image = canvas.toDataURL("image/png");
      return image;
}
//清除温度图
const removeKriging = () => {
    if(temptureLayer){
        viewer.imageryLayers.remove(temptureLayer);
        temptureLayer = null;
    }
    
};

3、实现效果

项目地址：github.com/DLFouge/vue…

欢迎指正与star