arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)

时间:2023-03-09 07:08:07
arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)

前言

关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。

内容概览

  1. 基于 arcgis api 3.x 热力图效果,构造数据源不依赖地图服务
  2. 基于 heatmap.js 实现热力图
  3. 源代码 demo 下载

前面我写过一篇文章,介绍如何实现 arcgis api 的热力图效果,但是依赖 arcgis server 发布的地图服务来获取热力图的数据源。实际应用中,很多业务数据来源数据库,并不一定是从地图服务来获取的。所以,本篇文章从两个不同的角度来优化一下热力图,谈谈不一样的实现热力图思路。

  • arcgis api 的 FeatureLayer 构造数据源不同之处来实现热力图
    arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)
    构造 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
};

实现效果如下:
arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)

更多的详情见GIS之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波