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>
  • 相关阅读:
    P1121 环状最大两段子段和
    无题
    cdoj 1485 柱爷搞子串 sam treap
    自然数幂和
    Gym 100341C AVL Trees NTT
    线性筛分解质因子
    codeforces 366 Ant Man dp
    UVALive 6914 Maze Mayhem 轮廓线dp
    hdu 5790 Prefix 字典树 主席树
    莫比乌斯反演个人小结
  • 原文地址:https://www.cnblogs.com/tracine0513/p/8651849.html
Copyright © 2011-2022 走看看