ArcGIS API for Javascript 4.X扩展heatmap.js实现热力图
虽然ArcGIS API for Javascript 4.X中已经提供了热力图对应的渲染器HeatmapRenderer
,但是在实际应用中,很多时候我们不想依赖于Server服务,而是通过业务数据与前端来实现热力图的快速渲染。前段时间有朋友问到类似的问题,所以小编想到了一个网页热力图神器——heatmap.js。
heatmap.js官网地址:https://www.patrick-wied.at/static/heatmapjs/
heatmap.js官方文档:https://www.patrick-wied.at/static/heatmapjs/docs.html
本篇是要介绍基于ArcGIS API for Javascript 4.X集成heatmap.js实现三维地图上的热力图渲染,效果如下图所示:
1、版本说明
- ArcGIS API for Javascript 4.10
- heatmap.js v2.0.5
2、实现思路
二者集成的关键在于坐标转换,heatmap.js的数据是一个基于屏幕坐标的对象,如下所示,x和y为屏幕横纵轴坐标,value为对应点的权重值。需要注意的是:这些坐标点的属性必须为整数
var dataPoint = {
x: 5, // 屏幕横纵坐标
y: 5, // 屏幕纵轴坐标
value: 100 // value值
};
我们一般用到的数据往往是经纬度或者平面坐标,本篇以经纬度为例,坐标系为WGS84坐标系【wkid:4326】,通过SceneView
对象的toScreen()
方法将原始数据转换成平均坐标,然后实例化heatmapInstance
,并添加转换后的数据进行渲染。下面是坐标转换的核心代码:
/*转换数据*/
convertHeatmapData: function (data) {
var heatPluginData = {
max: this.MaxValue(data),
data: [] //空数据
};