Vue+cesium实现热力图

最新推荐文章于 2024-06-07 15:37:02 发布

北漂的搬砖程序猿

最新推荐文章于 2024-06-07 15:37:02 发布

阅读量1k

点赞数 14

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/hpp001/article/details/135762757

版权

本文介绍了如何通过npm引入cesiumheatmap并在Cesium地图上实现热力图，包括设置热力图区域、定义数据格式和展示效果。作者详细展示了如何配置热力图参数以及提供了一个包含热力值的示例数据列表。

摘要由CSDN通过智能技术生成

1、引入cesiumheatmap

通过npm方式引入

npm install cesiumheatmap

如果通过npm方式安装可能会失败，可以手动下载CesiumHeatmap.js后放到public目录下，

并引入index.html文件中

  <script type="text/javascript" src="<%= BASE_URL %>heatmap/CesiumHeatmap.js"></script>

2、实现代码

methods:{ 
showHeatmap(){
// 热力图区域
          let bounds={
            west: 115.2,
            east: 115.6,
            south: 35.2,
            north: 35.3
          }
          const heatMap = CesiumHeatmap.create(this.viewer,bounds,{backgroundColor: "rgba(0,0,0,0)",
            radius: 100,     // 热力图半径大小
            maxOpacity: .5,
            minOpacity: 0,
            blur: .75,
            // gradient: {
            //   '.20': 'blue',
            //   '.60': 'yellow',
            //   '.75': 'orange',
            //   '.90': 'red'
            // }
          })
      
          heatMap.setWGS84Data(0,100,this.heatList) // 热力值区间，最小值0，最大值100
    }
}

热力数据heatList格式

 data() {
    return {
      heatList:[
        {"x":115.456,"y": 35.234, "value":86},
        {"x":115.356,"y": 35.244, "value":99},
        {"x":115.436,"y": 35.284, "value":66},
        {"x":115.386,"y": 35.254, "value":50},
        {"x":115.416,"y": 35.204, "value":90},
        {"x":115.459,"y": 35.239, "value":80},
        {"x":115.443,"y": 35.279, "value":85},
        {"x":115.438,"y": 35.264, "value":78},
        {"x":115.429,"y": 35.210, "value":75},
        {"x":115.451,"y": 35.271, "value":99}
      ]

    };
  },

3.效果图