ArcGIS API for Javascript 4.X扩展canvas在三维地图实现热力图

引言

本篇博客的实现思路源自一篇博客【数据可视化：浅谈热力图如何在前端实现】中介绍的方法，在此基础上结合ArcGIS API for Javascript 4.X进行了扩展，自定义了一个CanvasLayer模块，用于三维地图上基于canvas实现大量数据的热力图渲染。下图以一个轨迹数据集为例，数据来自echarts社区，效果图如下：

版本说明

ArcGIS API for Javascript 4.10

实现过程讲解

1、创建canvas画布

函数createCanvas主要通过脚本创建画布标签，根据场景视图SceneView的宽高属性来设置画布对象的样式，最后将画布添加到esri-view-surface类标签下。

/*创建Canvaslayer的容器canvas，添加到map的layers下面*/
createCanvas:function () {
   
     let canvas = document.createElement('canvas');
     canvas.width = this.view.width ;
     canvas.height = this.view.height;
     canvas.setAttribute("id","heatmap");
     canvas.style.position = "absolute";
     canvas.style.top = 0;
     canvas.style.left = 0;
     let parent = document.getElementsByClassName("esri-view-surface")[0];
     parent.appendChild(canvas);
     this.canvas = canvas;
     this.context = document.getElementById("heatmap").getContext('2d');
 }

2、转换数据

原始数据为经纬度，这里需要遍历数据集，通过SceneView类提供的toScreen()方法来转换成改坐标点对应的屏幕坐标x和y。此外，我们需要判断传入的数据集是否包含权重值，当数据没有权重时，我们默认每个数据点的权重为1。返回结构包含了屏幕坐标数据集和权重最大值和最小值。具体代码如下：

 /*转换数据*/
convertHeatmapData: function (data) {
   
     var heatPluginData = [];
     for(let i=0;i<data.length;i++){
   
         let screenpoint = this.view.toScreen(new Point({
   
             longitude:data[i][0],
             latitude:data[i][1],
         }));
         // 判断数据是否带有权重，未带有权重属性是默认为1
         if(data[0]