前言
關於本篇功能實現用到的 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之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波