ArcGIS JavaScript for API（002）弹窗 view 属性Popup_arcgis api for js 点击点弹窗-CSDN博客

本文链接：https://blog.csdn.net/wangjianbo09/article/details/124387079

首先创建arcgis api 基础环境，最基础的地图显示，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.23/"></script>
    <title>view-Popup-code</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <script>
        require(["esri/config", "esri/Map", "esri/views/MapView"], function (esriConfig, Map, MapView) {
            const map = new Map({
                 basemap: "streets" // Basemap layer service
            });
            const view = new MapView({
                map: map,
                center: [109,39], // Longitude, latitude 中国中部
                zoom: 5, // Zoom level
                container: "viewDiv" // Div element
            });
        });
    </script>
    <div id="viewDiv"></div>
</body>

</html>

效果如下图：

加入鼠标click事件方便测试，代码如下：

 view.on("click",function(event){
              console.log(event)
            })

打印结果：

调用popup ，popup 只有固定格式和内容，不支持修改，如果对popup 有更好要求可使用PopupTemplate。注意：系统自动识别右击显示窗体。

popup-title属性窗口标题

popup-content 具体内容

popup-location 在地图中的位置

    <script>
        require([
            "esri/config", "esri/Map", "esri/views/MapView",
            "esri/tasks/Locator"
        ], function (esriConfig, Map, MapView, Locator) {
            const map = new Map({
                basemap: "streets" // Basemap layer service
            });
            const view = new MapView({
                map: map,
                center: [109, 39], // Longitude, latitude 中国中部
                zoom: 5, // Zoom level
                container: "viewDiv" // Div element
            });
            view.on("click", function (event) {
                var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
                var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
                view.popup.open({
                    title: "坐标",
                    content:"Reverse geocode: [" + lon + ", " + lat + "]",
                    location: event.mapPoint
                });
            })
        });
    </script>

效果如下图：