arcgis-api-for-js-之自定义动态图层—热度图层

1. 前言

ArcGIS API for javascript 只提供了 TiledMapServiceLayer 、DynamicMapServiceLayer 、OGC 的web地图服务、开放街道地图服务以及对 KML 文件的支持，但是不支持创建自定义的图层。我们需要扩展 TiledMapServiceLayer 或 DynamicMapServiceLayer 类来自定义图层，

2. 实现思路

（1）使用初始化函数包含 URL 以及可选参数。

（2）如果需要，向服务器请求数据。

（3）处理服务器返回的数据。

（4）初始化空间参考系统。

（5）初始化起始显示范围。

（6）对于切片地图、增加初始切片信息。

（7）将 loaded 属性设置为 true。

（8）将图层本身作为参数调用 onLoad。

（9）对于动态图层，实现 getImageUrl 方法，面对于切片图层，实现 getTileURL 方法。

3. 实现步骤

（1）新建一个 HTML 页面，并在项目中创建一个文件夹，将我们所需的开源的热度图程序的 js 文件拷贝到 js 文件夹中，在 js 目录下新建一个名为 bism 目录，在该目录中新建一个名为HeatmapLayer.js 的文件。HeatmapLayer 类继承于DynamicMapServiceLayer ，其框架代码如下：

define(["dojo/_base/declare", "esri/layers/DynamicMapServiceLayer", "esri/geometry/Point", "esri/geometry/screenUtils", "dojo/dom-style", "dojo/query"],
function (declare, DynamicMapServiceLayer, Point, screenUtils, domStyle, query) {
return declare(DynamicMapServiceLayer, {});
});

按照前面的介绍，首先要加入的是变量与初始化函数，代码如下：

// 变量
properties: {},
heatMap: null,
// 构造函数
constructor: function (properties) {
declare.safeMixin(this.properties, properties);
// 地图变量
this._map = this.properties.map;
// 原始数据
this.lastData = [];
// 地图的DOM节点
this.domNode = document.getElementById(this.properties.domNodeId);
// 配置信息
this.config = {
element: this.domNode,
width: this._map.width,
height: this._map.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)"
}
};
// 在配置信息中包含heatmap.js文件中的设置
declare.safeMixin(this.config, properties.config);
// 创建热度图
this.heatMap = heatmapFactory.create(this.config);
// 将loaded属性设置为true
this.loaded = true;
this.onLoad(this);
this.globalMax = 0;
this._map.on("resize", this, this.resizeHeatmap);
this.domNode.style.position = 'relative';
this.domNode.style.display = 'none';
},

上面的代码使用了 heatmspFactory（在 heatmap.js文件中定义），并将 loaded 属性设置为 true。最后图层本身作为参数调用 onLoad 方法。

自定义动态图层的另一个关键是实现 getImageUrl 方法，代码如下：

// 得到图像
getImageUrl: function (extent, width, height, callback) {
// 使用获得的数据创建热度图
this.parseHeatmapData(this.lastData);
// 图像数据
var imageUrl = this.heatMap.get("canvas").toDataURL("image/png");
// 调用回调函数
callback(imageUrl);
}

上面的代码是首先调用 parsseHeatmapData 方法利用获得的数据在 canvas 上绘制热度图，然后利用 canvas 提供的 toDataURL 接口，将 canvas 画布转换为 base64 编码的图像，最后调用 calback 回调函数，返回图像的 URL。

实现效果：