利用arcgis api for javascript实现在地图上点的弹出（我的信息弹出不了）

2024-12-19 05:08:53 JS 1394

在 ArcGIS API for JavaScript 中实现在地图上点的弹出信息窗口可以通过以下步骤完成。下面我将详细解释如何实现：

引入 ArcGIS API 库：首先，在 HTML 文件中引入 ArcGIS API 的库文件。可以通过 CDN 或本地文件引入。
```
html
<script src="https://js.arcgis.com/4.24/"></script>
```

创建地图对象：在 JavaScript 中创建一个地图对象，并指定要显示的地图图层。

javascript
require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/widgets/Popup"
], function(Map, MapView, FeatureLayer, Popup) {
    var map = new Map({
        basemap: "streets"  // 可以选择其他的底图类型
    });

    var view = new MapView({
        container: "viewDiv",  // HTML 中地图容器的 ID
        map: map,
        center: [-118.805, 34.027],  // 地图中心点经纬度
        zoom: 12  // 初始缩放级别
    });
});

添加要素图层（Feature Layer）：创建一个要素图层，并向其中添加要素。在此过程中，可以设置每个要素的弹出窗口内容。

javascript
var featureLayer = new FeatureLayer({
    url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Congressional_Districts/FeatureServer/0",
    outFields: ["*"],  // 显示所有字段信息
    popupTemplate: {  // 设置弹出窗口的模板
        title: "{DISTRICTID}",
        content: "这是第 {DISTRICTID} 选区的信息。"
    }
});

map.add(featureLayer);

设置弹出窗口样式和内容：在上述代码中，通过 popupTemplate 属性设置每个要素的弹出窗口模板。可以使用字段值和其他信息来自定义弹出窗口的标题和内容。
显示弹出窗口： ArcGIS API 会自动处理用户在地图上点击要素时的弹出窗口显示。

完整的代码示例如下所示：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcGIS API for JavaScript Example</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="viewDiv"></div>

    <script src="https://js.arcgis.com/4.24/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer"
        ], function(Map, MapView, FeatureLayer) {
            var map = new Map({
                basemap: "streets"
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.805, 34.027],
                zoom: 12
            });

            var featureLayer = new FeatureLayer({
                url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Congressional_Districts/FeatureServer/0",
                outFields: ["*"],
                popupTemplate: {
                    title: "{DISTRICTID}",
                    content: "这是第 {DISTRICTID} 选区的信息。"
                }
            });

            map.add(featureLayer);
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个包含美国国会选区信息的要素图层，并为每个选区设置了弹出窗口模板，当用户点击地图上的选区时，将显示弹出窗口。通过修改 popupTemplate 的 title 和 content 属性，可以根据实际需求自定义弹出窗口的内容。