arcgis api for js-4.11 popups.html

最新推荐文章于 2023-11-02 16:58:28 发布

学无止境慢慢来

最新推荐文章于 2023-11-02 16:58:28 发布

阅读量202

点赞数

分类专栏： arcgis_js_api_demo4.11

本文链接：https://blog.csdn.net/weixin_42193179/article/details/89329353

版权

arcgis_js_api_demo4.11 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>popups</title>

    <!--<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />-->
    <!--<script src="https://js.arcgis.com/4.11/"></script>-->

    <!--我的接口。-->
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/themes/light/main.css">
    <script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/dojo/dojo.js"></script>

    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #instruction {
            /*z-index: -1;*/
            position: absolute;
            top: 15px;
            left: 50%;
            padding: 5px;
            margin-left: -175px;
            height: 20px;
            /*width: 350px;*/
            background: rgba(25, 25, 25, 0.8);
            color: white;
        }
        /*定义和用法*/
        /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
        /*注释：元素可拥有负的 z-index 属性值。*/
        /*注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！*/
        /*说明*/
        /*该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。*/
    </style>

    <script>
        require([
            "esri/tasks/Locator",
            "esri/Map",
            "esri/views/MapView"
        ], function(Locator, Map, MapView) {
            // 使用世界地理编码服务，设置定位器任务。
            var locatorTask = new Locator({
                url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
            });
            // 创建地图。
            var map = new Map({
                basemap: "streets-navigation-vector"
            });
            // 创建地图视图。
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [116.397245, 39.900930],
                zoom: 12
            });

            /*******************************************************************
             * 此单击事件设置弹出窗口上的一般内容。不绑定到层、图形或弹出模板。
             * 点的位置，用作反向地码方法的输入，生成的地址打印到弹出内容。
             *******************************************************************/
            // 此属性向弹出窗口指示，需要允许或不允许单击事件传播。
            // 此处如果为true，则不能弹窗。
            view.popup.autoOpenEnabled = false;
            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: "经纬度: [" + lon + ", " + lat + "]",
                    location: event.mapPoint  // 设置弹窗的位置为单击位置。
                });

                // 显示弹窗。
                // 使用单击的位置执行反向地理代码。
                locatorTask.locationToAddress(event.mapPoint).then(function(response) {
                    // 如果成功找到一个地址，则在弹窗中显示它。
                    view.popup.content = response.address;
                }).catch(function(error) {
                    // 如果承诺解析失败，没有找到结果, 则展示一条一般信息。
                    view.popup.content = "找不到此位置的地址！";
                });
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="instruction">
        单击地图上的任何位置以查看其街道地址。
    </div>
</body>
</html>