尝试一下 在 CodePen 中打开 在线预览 可以为每个要素属性定制 Popup 和 PopupTemplate 动作。
这个示例演示了如何针对每个选定的要素格式化自定义操作。它使用 Popup 和 PopupTemplate 。 虽然动作可以通过 Popup 或 PopupTemplate 的 动作 属性来添加，但是这个例子中的动作是在 featurelayer 的 popupTemplate 中设置的。
1
2
3
4
5
6
7
8
9
popupTemplate: {
actions : [
{
id : "find-brewery" ,
image : "beer.png" ,
title : "Brewery Info"
}
];
}
通过使用 class 或 image 属性来设置动作的样式。 如果使用 class，则必须使用图标字体。 如果使用 image ，您必须为将用作操作的背景图像的图像提供有效 URL 。在这个特定的示例中，一个图像用于指示操作按钮。
首先，查看 Popup 的 selectedFeature 属性。 接下来，如果要素的 website 值不为空，设置动作的 visible 属性为 true ，否则设置为 false 。
1
2
3
4
5
6
view.popup.watch( "selectedFeature" , ( graphic ) => {
if (graphic) {
const graphicTemplate = graphic.getEffectivePopupTemplate();
graphicTemplate.actions.items[ 0 ].visible = graphic.attributes.website ? true : false ;
}
});
PopupViewModel 触发器动作 的 触发，然后检查动作 ID 。在这种情况下，它正在侦听一个名为 find-brewery 的 ID。
1
2
3
4
5
popup.viewModel.on( "trigger-action" , ( event ) => {
if (event.action.id === "find-brewery" ) {
// do something
}
});
接下来，它获取所选要素的属性。我们不需要它们全部，因此在本例中，我们显式地获取了名称为 website 的属性，并将其存储在一个名为 info 的新变量中。
1
2
3
const attributes = popup.viewModel.selectedFeature.attributes;
// Get the 'website' field attribute
const info = attributes.website;
在此之后，我们检查以确保该值不为 null 。 如果不是，则执行一些字符串操作，并在一个新的浏览器窗口中打开存储在 website 字段中的 URL 值。 否则，控制台窗口中将显示一条消息。
1
2
3
4
5
6
7
{
// Make sure the 'website' attribute value is not null
if (info) {
// Open up a new browser using the URL value in the 'website' field
window .open(info.trim());
}
}