text arcgis for js 4.x集成热力图

Posted 2021-05-03

## arcgis for js 4.x集成热力图

####  主要步骤
1. [引入热力图插件 heatmap.js](#wendang)
2. [引入arcgis for js热力图集成工具](#tools)
3. [创建热力图图层](#create)
4. [获取数据，生成热力图](#getData)
5. [API](#API)


---

##### <span id="wendang">一、引入热力图插件 heatmap.js</span>
相关文档地址  
[github-heatmap](https://github.com/pa7/heatmap.js)   
[官方网站](https://www.patrick-wied.at/static/heatmapjs/)  
[CSDN相关资料](http://blog.csdn.net/rongchaoliu/article/details/47830799)

---
##### <span id="tools">二、引入arcgis for js热力图集成工具</span>


~~~JavaScript

var HeartMapLayer;
function initHeartMapLayer(createHeatMapLayer) {
    require([
        "esri/layers/BaseDynamicLayer",
        "esri/request"
    ], function (
        BaseDynamicLayer, esriRequest
    ) {
        HeartMapLayer = BaseDynamicLayer.createSubclass({
            properties: {},
            heatMap: null,
            // 构造方法
            constructor: function (properties) {
                dojo.safeMixin(this.properties, properties);

                //设置图层的ID
                id : properties.id || null,
                // 热力图创建所在的view
                this._view = this.properties.view;
                // 最终数据存储
                this.lastData = [];
                // 热力图所在dom
                this.domNode = document.getElementById(this.properties.domNodeId);
                // 初始化参数
                this.config = {
                    container : this.domNode,
                    width: this._view.width,
                    height: this._view.height,
                    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.00: "rgb(255,000,000)"
                    }
                };
                // 创建热力图
                this.heatMap = h337.create(this.config);
                // loaded
                this.loaded = true;
                // this.onLoad(this);
                // global maximum value
                this.globalMax = 0;

                //添加视图resize事件，调整heatmap尺寸
                // view.on("resize", function (event) {
                //     this.resizeHeatmap(event);
                // });
                dojo.connect(this._view, "onresize", this, this.resizeHeatmap);

                // heatlayer div styling
                this.domNode.style.position = 'relative';
                this.domNode.style.display = 'none';

                //TODO 绑定图层移除事件，待完善（延迟执行不确定性太多，但是未找到方法）
                this.on("layerview-destroy", function (event) {
                    setTimeout(function (layer) {
                        layer.view.map.add(layer);
                    }, 500, this);
                });
            },
            resizeHeatmap: function (event) {
                var width = event.width;
                var height = event.height;
                //设置画布宽高
                this.heatMap._renderer.setDimensions(width, height);
                // 设置热力图容器的宽高
                dojo.style(this.domNode, {
                    "width": width + 'px',
                    "height": height + 'px'
                });
                // set width and height of canvas element inside of container
                var child = dojo.query(':first-child', this.domNode);
                if (child) {
                    child.attr('width', width);
                    child.attr('height', height);
                }
            },
            //将转换后的数据设置到热力图
            storeHeatmapData: function (heatPluginData) {
                // 设置热力图的数据
                this.heatMap.setData(heatPluginData);
            },
            // 按照热力图插件的数据格式转换数据
            convertHeatmapData: function (parsedData) {
                var xParsed, yParsed, heatPluginData, dataPoint, screenGeometry;
                // 设置热力图插件的数据对象
                heatPluginData = {
                    max: parsedData.max,
                    data: []
                };
                if (parsedData.data) {
                    for (xParsed in parsedData.data) {
                        if (parsedData.data.hasOwnProperty(xParsed)) {
                            // for all y values and count
                            for (yParsed in parsedData.data[xParsed]) {
                                if (parsedData.data[xParsed].hasOwnProperty(yParsed)) {
                                    // 将经纬度作为转为屏幕XY坐标
                                    screenGeometry = view.toScreen(parsedData.data[xParsed][yParsed].dataPoint);
                                    // 将格式化后的数据放入数据集中
                                    heatPluginData.data.push({
                                        x: screenGeometry.x,
                                        y: screenGeometry.y,
                                        value: parsedData.data[xParsed][yParsed].heatValue // count value of x,y
                                    });
                                }
                            }
                        }
                    }
                }
                //将格式化后的数据设置到热力图并渲染
                this.storeHeatmapData(heatPluginData);
            },
            // 格式化数据，并获取最大值
            parseHeatmapData: function (features) {
                // variables
                var i, parsedData, dataPoint, attributes;
                // if data points exist
                if (features) {
                    // create parsed data object
                    parsedData = {
                        max: 0,
                        data: []
                    };
                    if (!this.config.useLocalMaximum) {
                        parsedData.max = this.globalMax;
                    }
                    // 遍历每一个坐标点
                    for (i = 0; i < features.length; i++) {
                        // 获取电信系
                        dataPoint = features[i].geometry;
                        // dataPoint = esri.geometry.Point(features[i].geometry);
                        // 检查点是否有效
                        var validPoint = false;
                        // 如果不使用设置的最大值, 点是有效的
                        if (!this.config.useLocalMaximum) {
                            validPoint = true;
                        }
                        // 如果使用设置的最大值，要确保点在当前视图内
                        else if(this._view.extent.contains(dataPoint)){
                            validPoint = true;
                        }
                        if (validPoint) {
                            attributes = features[i].attributes;
                            if (!parsedData.data[dataPoint.x]) {
                                parsedData.data[dataPoint.x] = [];
                            }
                            // 如果X,Y数据未创建，则创建
                            if (!parsedData.data[dataPoint.x][dataPoint.y]) {
                                // 创建一个数据对象
                                parsedData.data[dataPoint.x][dataPoint.y] = {};
                                // 如果热力图渲染属性在地图数据中存在，则使用地图数据
                                if (attributes && attributes.hasOwnProperty('heatValue')) {
                                    parsedData.data[dataPoint.x][dataPoint.y].heatValue = attributes.heatValue;
                                } else {
                                    parsedData.data[dataPoint.x][dataPoint.y].heatValue = 0;
                                }
                            }
                            // 渲染属性数据+1
                            parsedData.data[dataPoint.x][dataPoint.y].heatValue += 1;
                            // 添加经纬度点数据，用于下一步计算屏幕坐标
                            parsedData.data[dataPoint.x][dataPoint.y].dataPoint = dataPoint;
                            // 获取最大值
                            if (parsedData.max < parsedData.data[dataPoint.x][dataPoint.y].heatValue) {
                                parsedData.max = parsedData.data[dataPoint.x][dataPoint.y].heatValue;
                                if (!this.config.useLocalMaximum) {
                                    this.globalMax = parsedData.data[dataPoint.x][dataPoint.y].heatValue;
                                }
                            }

                        }
                    }
                    //按照热力图插件所需的数据格式进一步转换数据
                    this.convertHeatmapData(parsedData);
                }
            },
            // 设置数据
            setData: function (features) {
                // 设置地图的宽高
                var event = {width : this._view.width, height : this._view.height}
                this.resizeHeatmap(event);
                // 设置数据
                this.lastData = features;
                // this.parseHeatmapData(features);
                //重新描画图层，refresh方法在3D地图下无效，解决方案采用添加移除图层来解决
                var viewType = this.view.type;
                if (viewType == "3d") {
                    //TODO 移除图层，待完善（图层如果不在map中，如何处理？）
                    //该方法存在回调，移除后执行添加图层操作
                    this.view.map.remove(this);
                } else {
                    // 重新描画图层（此方法在3D地图下无效）
                    this.refresh();
                }
            },
            // 添加一个元素到热力图，并重新描画热力图
            addDataPoint: function (feature) {
                if (feature) {
                    // 将数据添加到最终数据
                    this.lastData.push(feature);
                    // 设置数据
                    setData(this.lastData);
                }
            },
            // 返回生成热力图的数据集合
            exportDataSet: function () {
                return this.lastData;
            },
            // TODO 清除数据
            clearData: function () {
                //清除热力图的数据
                this.heatMap.removeData();
                // this.heatMap.clear();
                var empty = [];
                //设置热力图数据未[]，并重新描画
                this.setData(empty);
            },
            // 获取图片二进制数据
            getImageUrl: function (extent, width, height) {
                // 始终最终数据创建热力图
                this.parseHeatmapData(this.lastData);
                // 获取生成的热力图图片信息
                var imageUrl = this.heatMap.getDataURL();
                return imageUrl;
            },
            //图片预处理，将二进制数据转为图片
            fetchImage : function (extent, width, height) {
                var url = this.getImageUrl(extent, width, height);
                return esriRequest(url, {
                    responseType: "image",
                    allowImageDataAccess: true
                })
                    .then(function(response) {
                        var image = response.data;

                        var canvas = document.createElement("canvas");
                        var context = canvas.getContext("2d");
                        canvas.width = width;
                        canvas.height = height;

                        //TODO 存在问题：width、height值为2048（原因不明），而热力图画板宽高为视图view宽高，直接放到视图则热力图会放大，计算宽高的差值，将热力图便宜解决上述问题
                        //计算X Y
                        var x = (width - this._view.width) / 2;
                        var y = (height - this._view.height) / 2;
                        context.drawImage(image, x, y, this._view.width, this._view.height);
                        return canvas;
                    }.bind(this));
            }
        });
        createHeatMapLayer();
    });
}
~~~


---
##### <span id="create">三、创建热力图图层</span>
1、视图创建完成之后执行，热力图初始化，并传入图层创建函数作为回调函数，热力图初始化完毕后创建热力图图层
~~~JavaScript
//初始化热力图，视图创建完毕后执行
initHeartMapLayer(createHeatMapLayer);

/**
 * 创建热力图
 */
function createHeatMapLayer() {
    heatLayer = new HeartMapLayer({
        config: {
            "useLocalMaximum": true,
            "radius": 40,
            "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.00: "rgb(255,000,000)"
            }
        },
        id : "heatLayer",
        "view": view,
        "domNodeId": "heatLayer",
        "opacity": 0.85
    });
    map.add(heatLayer);
}
~~~


---
##### <span id="getData">四、获取数据，生成热力图</span>
获取数据生成热力图，数据未arcgis点元素集合，调用setData函数设置数据，生成热力图

##### <span id="API">五、API</span>

Name | Parameter | Return Type | Summary
---|--- | ---|---
setData | [arcgis for js point元素集合](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html) | 无 | 设置热力图数据，并刷新热力图图层
addDataPoint | [arcgis for js point元素](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html) | 无 | 添加一个元素到热力图，并重新描画热力图
exportDataSet | 无 | [arcgis for js point元素集合](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html) | 返回生成热力图的数据
clearData | 无 | 无 | 清除热力图数据，并清除热力图