要在下一个JS中显示ArcGIS地图上多个坐标的信息窗口,您可以按照以下步骤进行操作:
<div>
元素。例如:<div id="mapView"></div>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Point",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Popup"
], function(Map, MapView, Point, Graphic, GraphicsLayer, Popup) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "mapView",
map: map,
center: [longitude, latitude], // 地图中心点的经纬度坐标
zoom: 10 // 缩放级别
});
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// 创建多个坐标点
var coordinates = [
{ longitude: lon1, latitude: lat1 },
{ longitude: lon2, latitude: lat2 },
// 添加更多的坐标点...
];
// 在地图上显示多个坐标点和信息窗口
coordinates.forEach(function(coord) {
var point = new Point({
longitude: coord.longitude,
latitude: coord.latitude
});
var graphic = new Graphic({
geometry: point,
symbol: {
type: "simple-marker",
color: "blue",
size: "10px"
},
attributes: {
name: "Location"
},
popupTemplate: {
title: "{name}",
content: "经度: {longitude}<br>纬度: {latitude}"
}
});
graphicsLayer.add(graphic);
});
// 配置信息窗口弹出样式
var popup = new Popup({
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
});
view.popup = popup;
});
这段代码通过使用ArcGIS API for JavaScript创建了一个地图视图,并在地图上添加了一个用于显示坐标点的图形图层。然后,遍历坐标点数组,在每个坐标点上添加一个图形,并为图形设置弹出窗口模板,包含名称、经度和纬度等信息。最后,使用Popup
类配置了信息窗口的弹出样式,并将其与地图视图关联起来。
请注意,上述示例代码仅提供了基本的示例,并未涉及实际的ArcGIS地图和坐标点数据。您可以根据您的具体需求和数据结构进行适当的修改和扩展。
关于ArcGIS API for JavaScript的更多信息和示例,您可以访问ArcGIS API for JavaScript官方文档进行学习和参考。
领取专属 10元无门槛券
手把手带您无忧上云