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>