尝试一下在线预览Popup 微件能包含一个或多个 动作 或按钮,这些动作或按钮允许用户在单击时执行某个功能。视图 上的默认弹出窗口包含一个用放大镜图标 表示的“放大”操作单击时,视图会放大四个 LODs 的点或放大非点的要素范围,并以选定要素为中心。
这个示例演示了如何向 Popup 和 PopupTemplate 添加自定义操作。动作是通过 Popup 或 PopupTemplate 的 动作 属性添加的。动作按照添加到动作数组的顺序添加到弹出窗口中。
通过使用 class
或 image
属性来设置动作的样式。如果使用 class
,则必须使用图标字体。 如果使用 image
,您必须为将用作操作的背景图像的图像提供有效 URL 。本示例中使用了两者的示例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 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();
}
});