ArcGIS JS API热力图（通过Graphic，不使用要素地图服务）

最新推荐文章于 2024-07-23 16:56:42 发布

shijie_nihao

最新推荐文章于 2024-07-23 16:56:42 发布

阅读量2.1k

点赞数 2

分类专栏： ArcGIS JS API 文章标签： arcgis js api 热力图

本文链接：https://blog.csdn.net/shijie_nihao/article/details/90118185

版权

ArcGIS JS API 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

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