cesium 加载热力图

效果图

1.首先引入CesiumHeatmap.js，CesiumHeatmap.js,地址不要积分。

2.地图初始化

var viewer = new Cesium.Viewer("csiumContain", {
        homeButton: true,//是否显示Home按钮
        animation: false,//是否显示动画控件
        timeline: false,//是否显示时间线控件
        fullscreenButton: false,
        baseLayerPicker: false,//是否显示图层选择控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        geocoder: false, //是否显示地名查找控件
        sceneModePicker: false,//是否显示3D/2D选择器 
    });

3.初始化热力图范围

    // 矩形坐标
    var bounds = {
        west: 102.2666, south: 29.8166, east: 102.8866, north: 30.35
    };

4.初始化CesiumHeatmap

   var heatMap = CesiumHeatmap.create(
        viewer, // 视图层
        bounds, // 矩形坐标
        { // heatmap相应参数
            backgroundColor: "rgba(0,0,0,0)",
            radius: 100,
            maxOpacity: .5,
            minOpacity: 0,
            blur: .75,
            // gradient:{
            //     '0.9':'red',
            //     '0.8':'orange',
            //     '0.7':'yellow',
            //     '0.5':'blue',
            //     '0.3':'green',
            // },
        }
    )

5.添加数据

 heatMap.setWGS84Data(-15, 20, getDataOpen(300));
 function getDataOpen(length) {
        var data = [];
        //多功乡
        data.push({ x: 102.8852, y: 30.0270, value: 15 });
        //紫石乡
        data.push({ x: 102.5996, y: 30.0469, value: 16 });

        data.push({ x: 102.772977, y: 30.061565, value: 13 });
        return data;
    }