弹出窗口操作

Popup 微件能包含一个或多个动作或按钮，这些动作或按钮允许用户在单击时执行某个功能。视图上的默认弹出窗口包含一个用放大镜图标表示的“放大”操作单击时，视图会放大四个 LODs 的点或放大非点的要素范围，并以选定要素为中心。

这个示例演示了如何向 Popup 和 PopupTemplate 添加自定义操作。动作是通过 Popup 或 PopupTemplate 的动作属性添加的。动作按照添加到动作数组的顺序添加到弹出窗口中。

通过使用 class 或 image 属性来设置动作的样式。如果使用 class ，则必须使用图标字体。如果使用 image ，您必须为将用作操作的背景图像的图像提供有效 URL 。本示例中使用了两者的示例。

// Add this action to the popup so it is always available in this view
const measureThisAction = {
  title: "Measure Length",
  id: "measure-this",
  image: "Measure_Distance16.png"
};

const template = {
  // autocasts as new PopupTemplate()
  title: "Trail run",
  content: "{name}",
  actions: [measureThisAction]
};

const featureLayer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
  popupTemplate: template // Set the popupTemplate with the actions set above
});

map.add(featureLayer);

// Execute each time the "Measure Length" is clicked
function measureThis() {
  const geom = view.popup.selectedFeature.geometry;
  const initDistance = geometryEngine.geodesicLength(geom, "miles");
  const distance = parseFloat(Math.round(initDistance * 100) / 100).toFixed(2);
  view.popup.content =
    view.popup.selectedFeature.attributes.name +
    "<div style='background-color:DarkGray;color:white'>" +
    distance +
    " miles.</div>";
}

// Event handler that fires each time an action is clicked.
view.popup.on("trigger-action", (event) => {
  // Execute the measureThis() function if the measure-this action is clicked
  if (event.action.id === "measure-this") {
    measureThis();
  }
});

Popup

actions

PopupTemplate

MapView

GeoScene API for JavaScript示例中心

弹出窗口操作