ArcGIS API for Javascript 4.X扩展heatmap.js实现热力图

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: [] //空数据
    };