前言
关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。
内容概览
- 基于 arcgis api 3.x 热力图效果，构造数据源不依赖地图服务
- 基于 heatmap.js 实现热力图
- 源代码 demo 下载
前面我写过一篇文章，介绍如何实现 arcgis api 的热力图效果，但是依赖 arcgis server 发布的地图服务来获取热力图的数据源。实际应用中，很多业务数据来源数据库，并不一定是从地图服务来获取的。所以，本篇文章从两个不同的角度来优化一下热力图，谈谈不一样的实现热力图思路。
- arcgis api 的 FeatureLayer 构造数据源不同之处来实现热力图
构造 FeatureLayer 的数据源是通过自己模拟数据或者从数据库读取数据
首先，构造 FeatureSet：
var featureSet = new esri.tasks.FeatureSet(dz);
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"fields": [
{
"name": "勘探深度",
"type": "esriFieldTypeDouble",
"alias": "勘探深度"
},
{
"name": "孔口高程",
"type": "esriFieldTypeDouble",
"alias": "孔口高程"
},
{
"name": "X",
"type": "esriFieldTypeDouble",
"alias": "X"
},
{
"name": "Y",
"type": "esriFieldTypeDouble",
"alias": "Y"
},
{
"name": "水位高程",
"type": "esriFieldTypeDouble",
"alias": "水位高程"
}
]
}
var featureCollection = {
layerDefinition: layerDefinition,
featureSet: featureSet
};
实现效果如下：
更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波