弹出 DOM 节点

这个示例展示了如何使用返回 DOM 节点的函数填充弹出窗口的内容。此函数返回一个 MapView.container，它表示 MapView 的节点。弹出窗口从 SceneView 获取点击的位置，并在 MapView 中显示相应的位置。

要使用这个示例，只需单击地图上的一个位置，就可以在弹出窗口中看到相应的位置。

请注意，视图在更新时不同步。如果这是所需的行为，请参阅 Overview Map 示例。

它是如何工作的呢？

SceneView 的 popup.open 调用创建 MapView 的函数。

它监听 SceneView's click 事件。出现这种情况后，在弹出窗口中设置 title, location 和 content 属性设置到 popup.open 方法中。内容属性调用一个setContentInfo 函数，该函数接受 center 和 scale 参数。

sceneView.popup.open({
  // Set the popup's title to the coordinates of the location
  title: "Map view coordinates: [" + lon + ", " + lat + "]",
  location: event.mapPoint, // Set the location of the popup to the clicked location
  content: setContentInfo(sceneView.center, sceneView.scale)
});

setContentInfo 函数创建一个新的 MapView 。创建一个新的 DIV 元素来保存名为 popupDiv 的 MapView 。

const popupDiv = document.createElement("div");
popupDiv.classList.add("mapView");

const popupView = new MapView({
  container: popupDiv,
  map: new Map({
    basemap: "topo-vector"
  }),

这个函数还会使 MapView 在弹出窗口中与 SceneView 处于中心位置，并根据 SceneView 的高度和宽度来更新它的比例。它还禁用旋转并删除 UI 组件。

center: sceneView.center,
scale: sceneView.scale * 2 * Math.max(sceneView.width / 250, sceneView.height / 250),
constraints: {
  rotationEnabled: false
},
ui: {
  components: []
}