美文网首页
Cesium(七)热力图

Cesium(七)热力图

作者: 我爱福尔摩斯呀 | 来源:发表于2020-06-23 13:03 被阅读0次

    一、下载cesium-heatmap.js
    在Cesium中实现热力图需要cesium-heatmap.js,可以使用npm直接下载

    npm install cesium-heatmap
    

    JavaScript环境也可以在github直接下载
    https://github.com/danwild/CesiumHeatmap
    二、配置路径
    在angular.json文件中添加js文件的路径:

    "scripts": [
       "node_modules/cesium-heatmap/CesiumHeatmap.js"
     ]
    

    三、代码实现

    // 矩形坐标
    var bounds = {
      west: -180.0, south: 30.0, east: -80.0, north: 50.0
    };
    
    // 初始化CesiumHeatmap
    var heatMap = CesiumHeatmap.create(
      viewer, // 视图层
      bounds, // 矩形坐标
      { // heatmap相应参数
          backgroundColor: "rgba(0,0,0,0)",
          radius: 15,
          maxOpacity: .5,
          minOpacity: 0,
          blur: .75
      }
    );
    
    // 添加数据 最小值,最大值,数据集
    heatMap.setWGS84Data(0, 100, getData(1000));
    viewer.zoomTo(viewer.entities);
    
    // 动态数据 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
    function getData(length) {
      var data = [];
      for (var i = 0; i < length; i++) {
          var x = Math.random() * (-180 + 80) - 80;
          var y = Math.random() * (50 - 30) + 30;
          var value = Math.random() * 100;
          data.push({x: x, y: y, value: value});
      }
      return data;
    }
    

    效果如下:


    image.png

    相关文章

      网友评论

          本文标题:Cesium(七)热力图

          本文链接:https://www.haomeiwen.com/subject/ssncfktx.html