Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能

2023-08-02 17:46:04

1. 对于Graphic对象，在初始化Graphic对象时设置popupTemplate属性，即可实现点击Graphic时显示弹窗。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Intro to SceneView - Create a 3D map</title>

    <style type="text/css">

        html, body, .map-container { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; }

        #map-container .esri-popup__main-container { width: 480px; }

        #map-container .esri-popup__header { border-bottom: 1px solid #a9a9a9; }

        #map-container .esri-popup__content { margin: 0; }

        #map-container .esri-popup__content > div { display: block; width: 450px; margin: 0 15px; }

        #map-container .popup-con-title { margin: 1.2em 0; font-weight: bold; }

        #map-container .popup-con-con { width: 450px; margin-bottom: 1em; }

    </style>

</head>

<body>

    <div class="map-container" id="map-container"></div>

    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

    <script src="https://js.arcgis.com/4.5/"></script>

    <script type="text/javascript">

        require(["esri/Map", "esri/views/SceneView", "esri/Graphic", "dojo/domReady!"], function (Map, SceneView, Graphic) {

            _map = new Map({

                "basemap": "satellite",

                "ground": "world-elevation"

            });

            _view = new SceneView({

                "map": _map,

                "container": "map-container"

            });

            //_view.ui.empty("top-left"); //清空左上角区域按钮

            var lng = 116.46, lat = 39.92;

            _view.then(function () {

                _view.goTo({ "zoom": 11, "tilt": 45, "center": [lng, lat] });

                var g = new Graphic({

                    "geometry": { "type": "point", "latitude": lat, "longitude": lng, "spatialReference": { "wkid": 4326 } },

                    "symbol": { "type": "simple-marker", "color": [226, 119, 40], },

                    "attributes": { "id": 1, "name": "名称XXXXX", "value": "结果YYYYY" },

                    "popupTemplate": {

                        "title": "信息提示",

                        "content": "<p class='popup-con-title'>这是一个模拟火情点</p>"

                        + "<div class='popup-con-con'>"

                        + "<div>坐标位置.经度：" + lng + "</div>"

                        + "<div>坐标位置.纬度：" + lat + "</div>"

                        + "<div>还可以显示其他的属性信息，并且这些信息可以自定义布局</div>"

                        + "</div>"

                    }

                });

                _view.graphics.add(g);

            });

        });

    </script>

</body>

</html>

2. 上面设置Graphic的popupTemplate属性只有在点击对象时才会显示弹窗。如果有这样一个需求，点击页面上某个按钮显示弹窗，则需要采用SceneView对象的popup属性来实现。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Intro to SceneView - Create a 3D map</title>

    <style type="text/css">

        html, body, .map-container { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; }

        #map-container .esri-popup__main-container { width: 480px; }

        #map-container .esri-popup__header { border-bottom: 1px solid #a9a9a9; }

        #map-container .esri-popup__content { margin: 0; }

        #map-container .esri-popup__content > div { display: block; width: 450px; margin: 0 15px; }

        #map-container .popup-con-title { margin: 1.2em 0; font-weight: bold; }

        #map-container .popup-con-con { width: 450px; margin-bottom: 1em; }

        .btn-container { position: absolute; top: 25px; right: 25px; }

    </style>

</head>

<body>

    <div class="map-container" id="map-container"></div>

    <div class="btn-container">

        <button id="btn-show">显示弹窗</button>

    </div>

    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

    <script src="https://js.arcgis.com/4.5/"></script>

    <script type="text/javascript">

        require(["esri/Map", "esri/views/SceneView", "esri/Graphic", "dojo/domReady!"], function (Map, SceneView, Graphic) {

            _map = new Map({

                "basemap": "satellite",

                "ground": "world-elevation"

            });

            _view = new SceneView({

                "map": _map,

                "container": "map-container"

            });

            //_view.ui.empty("top-left"); //清空左上角区域按钮

            var lng = 116.46, lat = 39.92;

            _view.then(function () {

                _view.goTo({ "zoom": 11, "tilt": 45, "center": [lng, lat] });

                var g = new Graphic({

                    "geometry": { "type": "point", "latitude": lat, "longitude": lng, "spatialReference": { "wkid": 4326 } },

                    "symbol": { "type": "simple-marker", "color": [226, 119, 40], },

                    "attributes": { "id": 1, "name": "名称XXXXX", "value": "结果YYYYY" }

                });

                _view.graphics.add(g);

                dojo.connect(dojo.byId("btn-show"), "onclick", function () {

                    console.info(g);

                    _view.popup.visible = false;

                    _view.popup.title = g.attributes.name;

                    _view.popup.location = g.geometry;

                    _view.popup.content =

                            "<p class='popup-con-title'>这是一个模拟火情点</p>"

                            + "<div class='popup-con-con'>"

                            + "<div>坐标位置.经度：" + g.geometry.x + "</div>"

                            + "<div>坐标位置.纬度：" + g.geometry.y + "</div>"

                            + "<div>还可以显示其他的属性信息，并且这些信息可以自定义布局</div>"

                            + "</div>";

                    _view.popup.visible = true;

                });

            });

        });

    </script>

</body>

</html>

3.当页面中存在对Graphic连线或移动等其他操作，此时需要暂时禁用Graphic弹窗。当未进行此操作时，要显示弹窗。需要SceneView对象的popup属性和hitTest函数配合来使用。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Intro to SceneView - Create a 3D map</title>

    <style type="text/css">

        html, body, .map-container { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; }

        #map-container .esri-popup__main-container { width: 480px; }

        #map-container .esri-popup__header { border-bottom: 1px solid #a9a9a9; }

        #map-container .esri-popup__content { margin: 0; }

        #map-container .esri-popup__content > div { display: block; width: 450px; margin: 0 15px; }

        #map-container .popup-con-title { margin: 1.2em 0; font-weight: bold; }

        #map-container .popup-con-con { width: 450px; margin-bottom: 1em; }

        .btn-container { position: absolute; top: 25px; right: 25px; color:#fff }

    </style>

</head>

<body>

    <div class="map-container" id="map-container"></div>

    <div class="btn-container">

        <input type="checkbox" id="chk_disable"/>禁用弹窗

    </div>

    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

    <script src="https://js.arcgis.com/4.5/"></script>

    <script type="text/javascript">

        require(["esri/Map", "esri/views/SceneView", "esri/Graphic", "dojo/domReady!"], function (Map, SceneView, Graphic) {

            _map = new Map({

                "basemap": "satellite",

                "ground": "world-elevation"

            });

            _view = new SceneView({

                "map": _map,

                "container": "map-container"

            });

            //_view.ui.empty("top-left"); //清空左上角区域按钮

            var lng = 116.46, lat = 39.92;

            _view.then(function () {

                _view.goTo({ "zoom": 5, "tilt": 5, "center": [lng, lat] });

                var g = new Graphic({

                    "geometry": { "type": "point", "latitude": lat, "longitude": lng, "spatialReference": { "wkid": 4326 } },

                    "symbol": { "type": "simple-marker", "color": [226, 119, 40], },

                    "attributes": { "id": 1, "name": "名称XXXXX", "value": "结果YYYYY" }

                });

                _view.graphics.add(g);

                _view.on("click", function (event) {

                    _view.hitTest({ x: event.x, y: event.y }).then(function (response) {

                        if (document.getElementById("chk_disable").checked) {

                            return;

                        }

                        var gCurr = response.results[0].graphic;

                        _view.popup.open();

                        _view.popup.title = gCurr.attributes.name;

                        _view.popup.location = gCurr.geometry;

                        _view.popup.content =

                                "<p class='popup-con-title'>这是一个模拟火情点</p>"

                                + "<div class='popup-con-con'>"

                                + "<div>坐标位置.经度：" + gCurr.geometry.x + "</div>"

                                + "<div>坐标位置.纬度：" + gCurr.geometry.y + "</div>"

                                + "<div>还可以显示其他的属性信息，并且这些信息可以自定义布局</div>"

                                + "</div>";

                        _view.popup.visible = true;

                    });

                });

            });

        });

    </script>

</body>

</html>
上一篇：java中set接口的用法


下一篇：Android中的flexboxlayout布局