Cesium 使用CesiumHeatmap.js生成热力图

最新推荐文章于 2024-04-29 01:03:33 发布

考班格

最新推荐文章于 2024-04-29 01:03:33 发布

阅读量779

点赞数 3

分类专栏：菜鸟学习编程之路 Cesium JavaScript 文章标签： javascript cesium 前端

本文链接：https://blog.csdn.net/QQhelphelp/article/details/135873554

版权

菜鸟学习编程之路同时被 3 个专栏收录

234 篇文章 5 订阅

订阅专栏

Cesium

43 篇文章 9 订阅

订阅专栏

JavaScript

41 篇文章 0 订阅

订阅专栏

本文介绍了如何在Cesium地图中利用CesiumHeatmap.js生成随机数据的热力图，包括设置矩形区域、初始化热力图参数，并动态添加数据点。

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

1.引入CesiumHeatmap.js

2.随机数据生成热力图

 //随机数，生成热力图
    function RandomHeatMap() {
      //矩形坐标
      var bounds = {
        west: -109.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: 50,
          maxOpacity: .5,
          minOpacity: 0,
          blur: .75
        }
      );

      // 添加数据 最小值，最大值，数据集
      heatMap.setWGS84Data(0, 100, getData(300));
      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() * (-109 + 80) - 80;
          var y = Math.random() * (50 - 30) + 30;
          var value = Math.random() * 100;
          data.push({ x: x, y: y, value: value });
        }
        return data;
      }

    }