ArcGIS JS API实例化多个弹窗

请问如何在ArcGIS JS API 4.X版本中实例化多个弹窗呢?目前通过下面代码只能实例化出来一个弹窗,需要手动去切换,但是我想在地图初始化之后打开多个弹窗,不知道该怎么做?
var point = {
type: 'point', // autocasts as new Point()
longitude: -71.2643,
latitude: 42.0909,
};

// Create a symbol for drawing the point
var markerSymbol = {
type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
};

// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol,
});
pointGraphic.popupTemplate = new PopupTemplate({
title: 'Results title',
content: 'Results: {Name}',
});
var point2 = {
type: 'point', // autocasts as new Point()
longitude: -72.2643,
latitude: 42.0909,
};

// Create a symbol for drawing the point
var markerSymbol2 = {
type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
};

// Create a graphic and add the geometry and symbol to it
var pointGraphic2 = new Graphic({
geometry: point2,
symbol: markerSymbol2,
});
pointGraphic2.popupTemplate = new PopupTemplate({
title: 'Results title',
content: 'Results: {Name}',
});
view.graphics.add(pointGraphic);
view.graphics.add(pointGraphic2);

setTimeout(function () {
var graphics = [pointGraphic, pointGraphic2];
console.log(graphics);
// view.popup.features = graphics;
// view.popup.open();
view.popup.open({
location: {
latitude: graphics[0].geometry.latitude,
longitude: graphics[0].geometry.longitude,
},
features: graphics, // array of graphics
featureMenuOpen: false, // selected features initially display in a list
updateLocationEnabled: true,
});
}, 5000);
已邀请:

许丹石

赞同来自:

使用Feature微件可以达成类似的效果。参考代码:https://jsbin.com/metakan/edit?html,output
当然也可以自己写div
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esr ... gt%3B
<!-- <link rel="stylesheet" href="http://dans.esrichina.com/arcg ... gt%3B -->
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.27/%26 ... gt%3B
<!-- <script src="http://dans.esrichina.com/arcg ... gt%3B -->
<script>
var map;

require(["esri/map","dojo/dom" ,"dojo/dom-construct","dojo/domReady!"], function(Map,dom,domConstruct) {
map = new Map("map", {
basemap: "osm", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
var div = dom.byId("map");
div.onclick = function(ee){
var x = ee.clientX;
var y = ee.clientY;
//alert("X坐标:" + x + ",Y坐标:" + y);
console.log("X坐标:" + x + ",Y坐标:" + y);
}
map.on("click",function(event){
var screenpoint = map.toScreen(event.mapPoint);
console.log(screenpoint);
var divceshi=domConstruct.toDom("<div style='position:absolute;left:"+screenpoint.x+"px;top:"+screenpoint.y+"px;border:3px solid #000'>测试X</br>窗口</div>");
domConstruct.place(divceshi, div, "after");
console.log(divceshi);

});

});
</script>
</head>

<body></body>
</html>

要回复问题请先登录注册