cesium基于克里金插值实现温度数据渲染

 Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。
 这里主要是基于原生js实现的三维温度渲染效果，通过克里金插值的方式将数据在cesium上进行插值渲染。实现了根据温度值渲染出热力图的效果。

主要js代码如下：

<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
        })
    });
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(73.0, 3.0, 135.0, 53.0);
    viewer.camera.flyHome(5);

    viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./bounds.geojson', {
        stroke: Cesium.Color.HOTPINK,
        fill: Cesium.Color.PINK.withAlpha(0.3),
        strokeWidth: 1
    }));

    function loadkriging() {
        var canvas = document.getElementById("canvasMap");
        canvas.width = 2000;
        canvas.height = 2000;
        var n = tempture.length;
        var t = [];
        var x = [];
        var y = [];
        for (var i = 0; i < n; i++) {
            t.push(tempture[i].properties.Temperatur); // 权重值
            x.push(tempture[i].geometry.coordinates[0]); // x
            y.push(tempture[i].geometry.coordinates[1]); // y
        }
        var variogram = kriging.train(t, x, y, "exponential", 0, 100);
        var grid = kriging.grid(bounds, variogram, 0.05);
        var colors = ["#00A600", "#01A600", "#03A700", "#04A700", "#05A800", "#07A800", "#08A900", "#09A900"];
        kriging.plot(canvas, grid, [73.4766, 135.088], [18.1055, 53.5693], colors);
    }
    function returnImgae() {
        var mycanvas = document.getElementById("canvasMap");
        return mycanvas.toDataURL("image/png");
    }
    loadkriging();
    var temptureLayer = viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
        url: returnImgae(),
        rectangle: new Cesium.Rectangle(
            Cesium.Math.toRadians(73.4766),
            Cesium.Math.toRadians(18.1055),
            Cesium.Math.toRadians(135.088),
            Cesium.Math.toRadians(53.5693)
        )
    }));
    temptureLayer.alpha = 0.4
</script>

实现效果如下：
点击链接下载完整代码内容