在 ArcGIS 4.0 中,可以通过以下步骤在 (lng, lat) 位置打开弹出窗口:
esri/PopupTemplate
类来定义弹出窗口的内容和样式。可以在弹出窗口中显示各种信息,如文本、图片、链接等。esri/layers/FeatureLayer
类来加载地理要素数据。确保该图层包含了需要弹出窗口的位置信息。esri/views/MapView
类创建一个地图视图,并将地图对象和图层对象添加到视图中。esri/tasks/QueryTask
类和 esri/tasks/support/Query
类来查询包含点击位置的要素。content
属性来设置弹出窗口的内容,可以使用 HTML 标签和属性来自定义弹出窗口的样式。view.popup.open()
方法打开弹出窗口。下面是一个示例代码:
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/PopupTemplate",
"esri/tasks/QueryTask",
"esri/tasks/support/Query"
], function(Map, MapView, FeatureLayer, PopupTemplate, QueryTask, Query) {
// 创建地图对象
var map = new Map({
basemap: "streets"
});
// 创建弹出窗口对象
var popupTemplate = new PopupTemplate({
title: "{Name}",
content: "<p>经度: {lng}</p><p>纬度: {lat}</p>"
});
// 创建图层对象
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/{your-service-url}/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate
});
// 创建地图视图
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [lng, lat] // 设置地图中心点
});
// 监听地图视图的点击事件
view.on("click", function(event) {
// 获取点击的坐标
var lng = event.mapPoint.longitude;
var lat = event.mapPoint.latitude;
// 创建查询任务
var queryTask = new QueryTask({
url: "https://services.arcgis.com/{your-service-url}/FeatureServer/0"
});
// 创建查询对象
var query = new Query();
query.geometry = event.mapPoint;
query.outFields = ["*"];
// 执行查询
queryTask.execute(query).then(function(result) {
if (result.features.length > 0) {
// 获取查询结果中的要素属性
var attributes = result.features[0].attributes;
// 设置弹出窗口的内容
popupTemplate.content = "<p>经度: " + lng + "</p><p>纬度: " + lat + "</p>";
// 打开弹出窗口
view.popup.open({
location: event.mapPoint,
content: attributes,
title: attributes.Name
});
}
});
});
// 将图层添加到地图中
map.add(featureLayer);
});
请注意,上述代码中的 {your-service-url}
部分需要替换为您自己的 ArcGIS 服务的 URL。此外,您还可以根据需要自定义弹出窗口的内容和样式。
希望这个答案能够满足您的需求。如果您需要更多帮助,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云