zoukankan      html  css  js  c++  java

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

    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>
  • 相关阅读:
    Android 课程设计
    第十个作业 简易通讯录
    第九个作业 QQ的账号密码保存
    第八个作业 QQ账号的保存
    第七个作业 Activity之间的数据回传
    第六个作业 应用列表
    第五个作业 背景换色
    JSP第一次作业
    安卓课设
    Android第八次作业
  • 原文地址：https://www.cnblogs.com/tracine0513/p/8651849.html
Copyright © 2011-2022 走看看