Cesium系列:热力图

简介: Cesium如何实现热力图

在Cesium上根据点,可以显示出热力图,在网上有开源的代码,具体的参考网址如下:

https://github.com/danwild/CesiumHeatmap

使用方式如下:

function testLoc(){

         //设定热力图的四至范围

      let bounds = {

          west: 116.13833844,

          east: 116.13956899,

          south: 37.43582929,

          north: 37.43706916

      };



      // i初始化热力图

      let heatMap = CesiumHeatmap.create(

          viewer, // your cesium viewer

          bounds, // bounds for heatmap layer

          {

              // heatmap.js options go here

              maxOpacity: 0.75

          }

      );



      // 设置一些随机的效果,这个可根据实际数据进行开发

      let data = [{

          "x": 116.1383442264,

          "y": 37.4360048372,

          "value": 76

      }, {

          "x": 116.1384363011,

          "y": 37.4360298848,

          "value": 63

      }, {

          "x": 116.138368102,

          "y": 37.4358360603,

          "value": 1

      }, {

          "x": 116.1385627739,

          "y": 37.4358799123,

          "value": 21

      }, {

          "x": 116.1385138501,

          "y": 37.4359327669,

          "value": 28

      }, {

          "x": 116.1385031219,

          "y": 37.4359730105,

          "value": 41

      }, {

          "x": 116.1384127393,

          "y": 37.435928255,

          "value": 75

      }, {

          "x": 116.1384551116,

          "y": 37.4359450132,

          "value": 3

      }, {

          "x": 116.1384927196,

          "y": 37.4359158649,

          "value": 45

      }, {

          "x": 116.1384938639,

          "y": 37.4358498311,

          "value": 45

      }, {

          "x": 116.1385183299,

          "y": 37.4360213794,

          "value": 93

      }, {

          "x": 116.1384007925,

          "y": 37.4359860133,

          "value": 46

      }, {

          "x": 116.1383604844,

          "y": 37.4358298672,

          "value": 54

      }, {

          "x": 116.13851025,

          "y": 37.4359098303,

          "value": 39

      }, {

          "x": 116.1383874733,

          "y": 37.4358511035,

          "value": 34

      }, {

          "x": 116.1384981796,

          "y": 37.4359355403,

          "value": 81

      }, {

          "x": 116.1384504107,

          "y": 37.4360332348,

          "value": 39

      }, {

          "x": 116.1385582664,

          "y": 37.4359788335,

          "value": 20

      }, {

          "x": 116.1383967364,

          "y": 37.4360581999,

          "value": 35

      }, {

          "x": 116.1383839615,

          "y": 37.436016316,

          "value": 47

      }, {

          "x": 116.1384082712,

          "y": 37.4358423338,

          "value": 36

      }, {

          "x": 116.1385092651,

          "y": 37.4358577623,

          "value": 69

      }, {

          "x": 116.138360356,

          "y": 37.436046789,

          "value": 90

      }, {

          "x": 116.138471893,

          "y": 37.4359184292,

          "value": 88

      }, {

          "x": 116.1385605689,

          "y": 37.4360271359,

          "value": 81

      }, {

          "x": 116.1383585714,

          "y": 37.4359362476,

          "value": 32

      }, {

          "x": 116.1384939114,

          "y": 37.4358844253,

          "value": 67

      }, {

          "x": 116.138466724,

          "y": 37.436019121,

          "value": 17

      }, {

          "x": 116.1385504355,

          "y": 37.4360614056,

          "value": 49

      }, {

          "x": 116.1383883832,

          "y": 37.4358733544,

          "value": 82

      }, {

          "x": 116.1385670669,

          "y": 37.4359650236,

          "value": 25

      }, {

          "x": 116.1383416534,

          "y": 37.4359310876,

          "value": 82

      }, {

          "x": 116.138525285,

          "y": 37.4359394661,

          "value": 66

      }, {

          "x": 116.1385487719,

          "y": 37.4360137656,

          "value": 73

      }, {

          "x": 116.1385496029,

          "y": 37.4359187277,

          "value": 73

      }, {

          "x": 116.1383989222,

          "y": 37.4358556562,

          "value": 61

      }, {

          "x": 116.1385499424,

          "y": 37.4359149305,

          "value": 67

      }, {

          "x": 116.138404523,

          "y": 37.4359563326,

          "value": 90

      }, {

          "x": 116.1383883675,

          "y": 37.4359794855,

          "value": 78

      }, {

          "x": 116.1383967187,

          "y": 37.435891185,

          "value": 15

      }, {

          "x": 116.1384610005,

          "y": 37.4359044797,

          "value": 15

      }, {

          "x": 116.1384688489,

          "y": 37.4360396127,

          "value": 91

      }, {

          "x": 116.1384431875,

          "y": 37.4360684409,

          "value": 8

      }, {

          "x": 116.1385411067,

          "y": 37.4360645847,

          "value": 42

      }, {

          "x": 116.1385237178,

          "y": 37.4358843181,

          "value": 31

      }, {

          "x": 116.1384406464,

          "y": 37.4360003831,

          "value": 51

      }, {

          "x": 116.1384679169,

          "y": 37.4359950456,

          "value": 96

      }, {

          "x": 116.1384194314,

          "y": 37.4358419739,

          "value": 22

      }, {

          "x": 116.1385049792,

          "y": 37.4359574813,

          "value": 44

      }, {

          "x": 116.1384097378,

          "y": 37.4358598672,

          "value": 82

      }, {

          "x": 116.1384993219,

          "y": 37.4360352975,

          "value": 84

      }, {

          "x": 116.1383640499,

          "y": 37.4359839518,

          "value": 81

      }];

                //设置最大最小值

      let valueMin = 0;

      let valueMax = 100;



      // 将数据添加到热力图

      heatMap.setWGS84Data(valueMin, valueMax, data); 

                 //定位到热力图的位置

      viewer.zoomTo(viewer.entities);

      }

热力图效果:
image.png

相关文章
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
5577 10
Cesium开发:模型实体高亮
Cesium开发:模型实体高亮
1454 0
120Echarts - 热力图(Calendar Heatmap Vertical)
120Echarts - 热力图(Calendar Heatmap Vertical)
341 0
分享:mapbox-gl的CGCS2000修改版
分享:mapbox-gl的CGCS2000修改版
700 0
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
3424 0
cesium添加实体不被地形遮挡的参数设置
|
数据可视化 前端开发 JavaScript
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
5102 0
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
Vue2时间轴(横向)
该横向时间轴组件 `HorizonTimeLine` 可自定义时间轴数据 (`timelineData`) 和初始选中年份 (`activeYear`)。通过点击不同的年份,可以改变当前激活的年份,并有相应的视觉反馈。该组件支持均匀自适应排列,且易于在其他页面中引入和使用。
1527 0
Vue2时间轴(横向)
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
1230 2
Cesium导入geojson数据
|
编解码 定位技术
Cesium案例解析(七)——Layers在线地图服务
Cesium案例解析(七)——Layers在线地图服务
682 0
|
JSON 数据格式
Cesium实现贴地线
这篇文章介绍了在Cesium中实现地面贴合线的效果及其相关技术要点。
644 5
Cesium实现贴地线

热门文章

最新文章