ArcGIS JS API熱力圖（通過Graphic，不使用要素地圖服務）

        ArcGIS JS API裏面有一個render類是HeatmapRenderer，FeatureLayer類有個setRender(render)方法，一般情況下是通過地圖服務獲取數據創建FeatureLayer，其實也可以“避開”地圖服務，通過代碼往FeatureLayer裏面添加數據渲染熱力圖，其實添加的數據就是graphic。

 

1、創建FeatureLayer的定義(layerDefinition )（創建字段）。

                    var layerDefinition = {
                        "geometryType": "esriGeometryPoint",
                        "fields": [{
                            "name": "xxx",  //字段名稱xxx
                            "type": "esriFieldTypeInteger"  //字段數據類型
                          }   //可以在數組裏添加多個字段
                        ]
                    };

2、通過layerDefinition 創建featureCollection。

                    var featureCollection = {
                        "layerDefinition": layerDefinition,
                        "featureSet": {
                            "features": null,
                            "geometryType": "esriGeometryPoint" //FeatureLayer只能添加一種geometry,GraphicsLayer可以添加多種
                        }
                    };

3、通過featureCollection創建FeatureLayer，添加到地圖上。

                    var heatMapLayer = new FeatureLayer(featureCollection, {
                        mode: FeatureLayer.MODE_SNAPSHOT,
                        outFields: ["*"],
                        opacity: 1
                    });
                    heatMapLayer['id'] = "heatMap";
                   map.addLayer(heatMapLayer);

4、創建HeatmapRender渲染器

                   var heatmapRenderer = new HeatmapRenderer({  
                       colorStops: [  // 根據實際需要設置colorStops
                           { ratio: 0, color: "rgba(0, 0, 255,0)" },
                           { ratio: 0.5, color: "rgb(0, 0, 255)" },
                           { ratio: 0.7, color: "rgb(255, 0, 255)" },
                           { ratio: 0.9, color: "rgb(255, 0, 0)" }],
                       blurRadius: 8,
                       maxPixelIntensity: 100,
                       minPixelIntensity: 0,
                   });

5、往3中定義的heatMapLayer上添加數據

for (var i = 0; i < arr.length; i++) {
    var x = parseFloat(arr[i].x);
    var y = parseFloat(arr[i].y); //arr是自定義的數據數組
    var point = new Point(x, y, map.spatialReference);
     //xxx是在layerDefinition中定義的屬性名稱，g不需要定義symbol
    var g = new Graphic(point, null, { xxx: i }, null); 
    heatMapLayer.add(g);
}

6、heatMapLayer設置渲染器

heatMapLayer.setRenderer(heatmapRenderer);

7、設置渲染器 前後地圖對比

8、完整代碼demo下載地址:

https://download.csdn.net/download/shijie_nihao/11173262