ArcGIS API for JavaScript-弹出窗口简介

弹出窗口通过显示信息以响应用户操作，提供了一种简便的方法来将交互性添加到ArcGIS API for JavaScript应用程序。每个view都有一个与之关联的popup。在大多数情况下，弹出窗口的内容允许用户从图层和图形访问数据属性。

虽然弹出窗口通常与图形层或要素层一起使用，但是您也可以显示弹出窗口以响应查询或不涉及图形或要素的某些其他操作。例如，您可以在视图中显示用户单击位置的纬度/经度坐标。

本示例将通过设置默认属性（例如content，title和location）并显示它而无需从PopupTemplate，图形或图层的要素中提取信息来指导您如何在视图中使用默认Popup。该示例使用Locator任务对视图上单击位置的点进行反向地理编码。返回的地址显示在弹出窗口的内容中，而单击位置的纬度和经度显示在弹出窗口的标题内。

1.需要Locator，Map和MapView模块并创建新实例

使用世界地理编码服务创建一个定位器。创建一个基本地图。将地图实例添加到视图。您的JavaScript看起来应类似于以下代码：

require(["esri/tasks/Locator", "esri/Map", "esri/views/MapView"], function(Locator, Map, MapView) {
  // Create a locator task using the world geocoding service
  var locatorTask = new Locator({
    url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
  });

  // Create the Map
  var map = new Map({
    basemap: "streets-navigation-vector"
  });

  // Create the MapView
  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-71.6899, 43.7598],
    zoom: 12
  });
});

2.监听视图的单击事件，并在单击的位置显示弹出窗口

在视图上监听click事件，并获取单击位置的经度和纬度。在单击的位置显示弹出窗口，并在弹出的标题中显示单击的位置的坐标。为此，我们将在open（）方法中设置弹出窗口的位置和标题属性。

view.popup.autoOpenEnabled = false;
view.on("click", function(event) {
  // Get the coordinates of the click on the view
  // around the decimals to 3 decimals
  var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
  var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

  view.popup.open({
    // Set the popup's title to the coordinates of the clicked location
    title: "Reverse geocode: [" + lon + ", " + lat + "]",
    location: event.mapPoint // Set the location of the popup to the clicked location
  });
});

3.找到单击位置的地址，然后在弹出的内容中显示匹配的地址

单击的位置用作反向地理编码方法的输入，结果地址显示在弹出窗口的内容中。用户单击视图后，调用locatorTask.locationToAddress（）方法并传递被单击的点以获取该位置的地址。如果找到该点的匹配地址，则设置弹出窗口的content属性以显示该地址。最后，如果未找到所单击位置的地址，则弹出窗口的内容将显示一条通用消息，指示未找到地址。

var params = {
  location: event.mapPoint
};

// Execute a reverse geocode using the clicked location
locatorTask
  .locationToAddress(params)
  .then(function(response) {
    // If an address is successfully found, show it in the popup's content
    view.popup.content = response.address;
  })
  .catch(function(error) {
    // If the promise fails and no result is found, show a generic message
    view.popup.content = "No address was found for this location";
  });