前面我寫過一篇文章，介紹如何實現arcgis api的熱力圖效果，但是依賴arcgis server釋出的地圖服務來獲取熱力圖的資料來源。實際應用中，很多業務資料來源資料庫，並不一定是從地圖服務來獲取的。所以，本篇文章從兩個不同的角度來優化一下熱力圖，談談不一樣的實現熱力圖思路。

1.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
};
 

實現效果如下：

2.開源heatmap.js結合arcgis api for js實現熱力圖：

自定義HeatmapLayer類，繼承DynamicMapServiceLayer，然後結合heatmap.js一起

        /**
         * 建立熱力圖
         * 依賴開源js庫heatmap.js
        */
        createHeatMapByJS:function(map,featureSet){
            // create heat layer
            var heatLayer = BX.heatmap.heatLayer2 = new heatmap.HeatmapLayer({
                "useLocalMaximum": false,
                config: {
                    "radius": 40,
                    "valueField": "水位高程",
                    "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)"
                    }
                },
                "map": map,
                "opacity": 0.85
            }, "heatLayerDIV"); 
            // set heatmap data
            heatLayer.setData(featureSet.features);
            // add heat layer to map
            map.addLayer(heatLayer);            
            //heatLayer.show();         
            
        }
 

最終實現熱力圖效果如下：

GIS之家新部落格系列釋出更新在GIS之家網站，歡迎關注收藏：GIS之家網站 
GIS之家作品：GIS之家 
GIS之家交流諮詢：諮詢模式