尝试一下在线预览通过显示响应用户操作的信息，弹窗提供了一种向 GeoScene API for JavaScript 应用程序添加交互性的简单方法。 每个视图都有一个与之关联的弹出窗口。 在大多数情况下，弹出窗口的内容允许用户访问来自图层和图形的数据属性。
虽然弹出窗口通常与图形图层或要素图层一起使用，但您也可以显示弹出窗口以响应查询或其他不涉及图形或要素的操作。 例如，您可以显示用户在视图中单击位置的纬度/经度坐标。
此示例将引导您了解如何在视图中使用默认 Popup，方法是设置其content、title 和 location 等属性，并在不从 PopupTemplate、图形或图层要素中提取信息的情况下显示它。该示例使用 locator 从视图上的单击位置对点进行反向地理编码。返回的地址显示在弹窗的内容中，而点击位置的经纬度显示在弹窗的标题中。
在完成以下步骤之前，您应该熟悉视图和地图。如有必要，请先完成以下教程：
1. 需要 locator、Map 和 MapView 模块并创建新实例
使用 the World Geocoding Service 创建一个 locator url 。创建一个基本 Map。将 Map 实例添加到 View。您的 JavaScript 应该类似于以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
require(["geoscene/rest/locator", "geoscene/Map", "geoscene/views/MapView"], (locator, Map, MapView) => {
// 使用世界地理编码服务创建定位器 url
const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer";
// 创建 Map
const map = new Map({
basemap: "geoscene-blue"
});
// 创建 MapView
const view = new MapView({
container: "viewDiv",
map: map,
center: [-71.6899, 43.7598],
zoom: 12
});
});
2. 监听视图的点击事件并在点击位置显示弹窗
监听视图上的点击事件，获取点击位置的经纬度。在点击位置显示弹出窗口，并在弹出窗口标题中显示点击位置的坐标。为此，我们将在 open() 方法中设置弹出窗口的位置和标题属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
view.popup.autoOpenEnabled = false;
view.on("click", (event) => {
// 获取点击视图的坐标
// 围绕小数点到小数点后3位
const lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
const lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
view.popup.open({
// 将弹出窗口的标题设置为单击位置的坐标
title: "Reverse geocode: [" + lon + ", " + lat + "]",
location: event.mapPoint // 将弹窗的位置设置为点击的位置
});
});
3. 定位点击位置的地址，并在弹出内容中显示匹配的地址
单击的位置用作反向地理编码方法的输入，结果地址显示在弹出窗口的内容中。 用户单击视图后，调用 locator.locationToAddress() 方法并传递单击点以获取该位置的地址。 如果找到该点的匹配地址，则设置弹出窗口的 content 属性以显示该地址。 最后，如果没有找到点击位置的地址，弹出窗口的 content 会显示一条通用消息，指示没有找到地址。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const params = {
location: event.mapPoint
};
// 使用单击的位置执行反向地理编码
locator
.locationToAddress(locatorUrl, params)
.then((response) => {
// 如果成功找到地址，则将其显示在弹出窗口的内容中
view.popup.content = response.address;
})
.catch(() => {
// 如果 promise 失败并且没有找到结果，则显示一条通用消息
view.popup.content = "No address was found for this location";
});