arcgis js 4 与h337 构建热力图 （适用于最新的4.21版本）

arcgis js 4 自带的热力图只能用于mapView， 对于sceneView 只能用别的方法来构建，对于最新arcgis api dojo 已经全部清除
之前热力图构建方法失效，于是乎重新改代码

其中Point 是esri 的Point 可以预先加载好存起来

// @ts-ignore
import h337 from 'heatmap.js';

export class HeatMapLayer {
name: 'HeatMapLayer';
lastZoom: 0;
view: any;
box: any;
heatmap: any;
config: any;
visible: boolean;
data: any;
chart: any;
isShow: boolean = true;
map_DragStart_Listener: any
map_DragEnd_Listener: any;
map_ZoomStart_Listener: any;
map_ZoomEnd_Listener: any;
map_ExtentChange_Listener: any;
map_click_Listener: any;
constructor(view: any, config: any, data: any) {
this.init(view, config, data);
}
init(view: any, config: any, data: any) {
this.setBaseMap(view);
this.createDIV();
this.defaultConfig();
//更新配置
if (config) {
this.setConfig(config);
}
this.createLayer();
this.setData(data);
this.startMapEventListeners();
}
setBaseMap(view: any) {
this.view = view;
}
defaultConfig() {
this.config = {
container: this.box,
radius: 40,
debug: false,
visible: true,
useLocalMaximum: false,
gradient: {
0.45: 'rgb(000,000,255)',
0.55: 'rgb(000,255,255)',
0.65: 'rgb(000,255,000)',
0.95: 'rgb(255,255,000)',
1.0: 'rgb(255,000,000)'
}
};
//this.heatmap = heatmapFactory.create(this.config);
}
setConfig(config: any) {
this.config = {
container: this.box,
radius: config.radius,
maxOpacity: config.maxOpacity,
minOpacity: config.minOpacity,
debug: false,
visible: true,
useLocalMaximum: false,
gradient: config.gradient
};
if (!this.isShow) {
this.config.width = config.width;
this.config.height = config.height;
}
}
setData(points: any) {
// console.log(points,"iiiiiiiiiiiiiiiiiii");
this.data = JSON.parse(JSON.stringify(points));
// console.log( this.data,"000000000000000000");
}
setVisible(bool: any) {
if (!this.box || this.visible === bool) return;
this.box.hidden = !bool;
this.visible = bool;
// bool === true && setCharts();
}
refreshBegin() {
this.box.hidden = true;
}
refreshEnd() {
this.box.hidden = false;
}
on(eventName: any, handler: any, context: any) {
this.chart.on(eventName, handler, context);
}
off(eventName: any, handler: any, context: any) {
this.chart.off(eventName, handler, context);
}

/*创建HeatMaplayer的容器，添加到map的layers下面*/
createDIV() {
this.box = document.createElement('div');
this.box.setAttribute('id', 'testData');
this.box.style.width = this.view.width + 'px';
this.box.style.height = this.view.height + 'px';
this.box.style.position = 'absolute';
this.box.style.top = 0;
this.box.style.left = 0;
if (this.isShow) {
const parent = document.getElementsByClassName('esri-view-surface')[0];
parent.appendChild(this.box);
}
}
/*创建HeatMaplayer的容器，添加到map的layers下面*/
createLayer() {
this.heatmap = h337.create(this.config);
// heatMapLayer.heatmap = this.heatmap;
}
/*转换数据*/
convertHeatmapData(data1: any) {
const heatPluginData = {
max: this.MaxValue(data1),
data: new Array()
};
 
if (data1[1].length == 2) {
for (let i = 0; i < data1.length; i++) {
const screenpoint = this.view.toScreen(
 更多参考https://xiaozhuanlan.com/topic/1708529463