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: [] //空数据
    };
    // 判断原始数据是否带有权重
    if (data[1].length==2) {
     
		// 转换成屏幕坐标
        for(var i=0;i<data.length;i++){
     
            var screenpoint = this.view.toScreen(new Point({
     
                longitude:data[i][0],
                latitude:data[i][1],
            }));
			// 默认权重为l
            heatPluginData.data.push(
                {
     
                    x:Math.round(screenpoint.x),
                    y:Math.round(screenpoint.y),
                    value:1
                }
            )
        }
    }else{
     
        for(var i=0;i<data.length;i++){
     
            var screenpoint = this.view.toScreen(new Point({
     
                longitude:data[i][0],
                latitude:data[i][1],
            }));
            heatPluginData.data.push(
                {
     
                    x:Math.round(screenpoint.x),
                    y:Math.round(screenpoint.y),
                    value:data[i][2]
                }
            )
        }
    }
    return heatPluginData;
}

实例化heatmapInstance并添加数据

/*创建HeatMaplayer的容器，添加到map的layers下面*/
 createLayer:function() {
     
     this.heatmap = h337.create(this.config);
 },
 addData:function () {
     
     let data = this.convertHeatmapData(this.data)
     this.heatmap.setData(data);
     this.box.style.position = "absolute";
 }

添加监听事件进行刷新：

/*监听地图事件，根据图层是否显示，判断是否重绘热力图*/
startMapEventListeners:function() {
     
    let view=this.view;
    view.watch("extent",lang.hitch(this,function () {
     
        if(!this.visible) return;
        this.freshenLayer();
        this.box.hidden = false;
    }));
    view.watch("camera",lang.hitch(this,function () {
     
        if(!this.visible) return;
        this.freshenLayer();
        this.box.hidden = false;
    }));
}

本篇博客就介绍这么多，下面是本篇博客中的示例代码：

ArcGIS API4.X+heatmap.js热力图示例