ArcgisForJS如何将ArcGIS Server发布的点要素渲染为热力图？

文章目录

0.引言
1.ArcGIS创建点要素
[2.ArcGIS Server发布点要素](#2.ArcGIS Server发布点要素)
3.ArcgisForJS将ArcGIS创建的点要素渲染为热力图

0.引言

ArcGIS For JS 是一个强大的地理信息系统（GIS）工具，它允许开发者使用 JavaScript 语言来创建各种 GIS 应用。ArcGIS Server 是 ArcGIS For JS 的一个组件，它提供了一个强大的服务，用于发布和处理地理空间数据。在 ArcGIS For JS 中，你可以使用 ArcGIS Server API 发布点要素数据，并通过 ArcGIS Server API 的热力图功能将其渲染为热力图。

1.ArcGIS创建点要素

（1）新建一个mxd地图文档，命名为renderHeatmap；

（2）双击连接地理数据库和ArcGIS Server

（3）点要素创建并注册

（4）添加编辑要素的底图

（5）编辑点要素并添加属性值

（6）移除底图图层

2.ArcGIS Server发布点要素

在ArcGIS Server中查看。

REST URL：http://localhost:6080/arcgis/rest/services/renderHeatmap/FeatureServer

3.ArcgisForJS将ArcGIS创建的点要素渲染为热力图

（1）实现代码

csharp 复制代码

<html lang="en">
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  
    <title>Intro to heatmap | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>  
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />  
  
    <style>  
        html,  
        body,  
        #viewDiv {  
            padding: 0;  
            margin: 0;  
            height: 100%;  
            width: 100%;  
        }  
    </style>  
  
    <script src="https://js.arcgis.com/4.28/"></script>  
  
    <script>  
        require(["esri/Map", "esri/layers/FeatureLayer", "esri/views/MapView", "esri/widgets/Legend"], (  
            Map,  
            FeatureLayer,  
            MapView,  
            Legend  
        ) => {  
            const url="http://localhost:6080/arcgis/rest/services/renderHeatmap/FeatureServer";  
  
            // Paste the url into a browser's address bar to download and view the attributes  
            // in the CSV file. These attributes include:  
            // * mag - magnitude  
            // * type - earthquake or other event such as nuclear test  
            // * place - location of the event  
            // * time - the time of the event  
  
            const template = {  
                title: "标题",  
                content: "值为{va}。"  
            };  
  
            // The heatmap renderer assigns each pixel in the view with  
            // an intensity value. The ratio of that intensity value  
            // to the maxPixel intensity is used to assign a color  
            // from the continuous color ramp in the colorStops property  
  
            const renderer = {  
                type: "heatmap",  
                field: "va",  
                colorStops: [  
                    { color: "rgba(63, 40, 102, 0)", ratio: 0 },  
                    { color: "#472b77", ratio: 0.083 },  
                    { color: "#4e2d87", ratio: 0.166 },  
                    { color: "#563098", ratio: 0.249 },  
                    { color: "#5d32a8", ratio: 0.332 },  
                    { color: "#6735be", ratio: 0.415 },  
                    { color: "#7139d4", ratio: 0.498 },  
                    { color: "#7b3ce9", ratio: 0.581 },  
                    { color: "#853fff", ratio: 0.664 },  
                    { color: "#a46fbf", ratio: 0.747 },  
                    { color: "#c29f80", ratio: 0.83 },  
                    { color: "#e0cf40", ratio: 0.913 },  
                    { color: "#ffff00", ratio: 1 }  
                ],  
                maxDensity: 0.01,  
                minDensity: 0  
            };  
  
            const layer = new FeatureLayer({  
                url: url,  
                title: "test heatmap",  
                popupTemplate: template,  
                renderer: renderer,  
                labelsVisible: true,  
                labelingInfo: [  
                    {  
                        symbol: {  
                            type: "text", // autocasts as new TextSymbol()  
                            color: "white",  
                            font: {  
                                family: "Noto Sans",  
                                size: 8  
                            },  
                            haloColor: "#472b77",  
                            haloSize: 0.75  
                        },  
                        labelPlacement: "center-center",  
                        labelExpressionInfo: {  
                            expression: "Text($feature.va, '#.0')"  
                        },  
                        where: "va > 4"  
                    }  
                ]  
            });  
  
            const map = new Map({  
                basemap: "gray-vector",  
                layers: [layer]  
            });  
  
            const view = new MapView({  
                container: "viewDiv",  
                center: [106.49446091380375, 29.559187456407138],  
                zoom: 10,  
                map: map  
            });  
  
            view.ui.add(  
                new Legend({  
                    view: view  
                }),  
                "bottom-left"  
            );  
  
            点击地图获取经纬度坐标  
            //view.on("click", evt => {  
            //    let mapPoint = evt.mapPoint;  
            //    alert(`经度：${mapPoint.longitude},纬度${mapPoint.latitude}`);  
            //});  
        });  
    </script>  
</head>  
  
<body>  
    <div id="viewDiv"></div>  
</body>  
</html>

（2）实现结果

参考资料：

$1$ 一入GIS深似海. 不一样的前端，JavaScript之arcgis api教程; 2020-11-02 $accessed 2024-02-24$ .

$2$ HPUGIS. ArcGIS API For JS 之render（符号渲染); 2018-07-03 $accessed 2024-02-24$ .

$3$ 风衡. JS API 4.0地图渲染之符号（一）; 2016-08-22 $accessed 2024-02-24$ .

$4$ GIS_KHF. JS API 4.x地图渲染之符号（二）(转载); 2016-11-10 $accessed 2024-02-24$ .

$5$ 不睡觉的怪叔叔. ArcGIS API For JavaScript官方文档（二十）之图形和要素图层------③符号和渲染器; 2018-04-13 $accessed 2024-02-24$ .