尝试一下 在 CodePen 中打开 在线预览 可以为每个要素属性定制 Popup 和 PopupTemplate 动作。
这个示例演示了如何针对每个选定的要素格式化自定义操作。它使用 Popup 和 PopupTemplate 。 虽然动作可以通过 Popup 或 PopupTemplate 的 动作 属性来添加,但是这个例子中的动作是在 featurelayer 的 popupTemplate 中设置的。
Copy
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
。
Copy
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。
Copy
1
2
3
4
5
popup.viewModel.on( "trigger-action" , ( event ) => {
if (event.action.id === "find-brewery" ) {
// do something
}
});
接下来,它获取所选要素的属性。我们不需要它们全部,因此在本例中,我们显式地获取了名称为 website
的属性,并将其存储在一个名为 info
的新变量中。
Copy
1
2
3
const attributes = popup.viewModel.selectedFeature.attributes;
// Get the 'website' field attribute
const info = attributes.website;
在此之后,我们检查以确保该值不为 null
。 如果不是,则执行一些字符串操作,并在一个新的浏览器窗口中打开存储在 website
字段中的 URL 值。 否则,控制台窗口中将显示一条消息。
Copy
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());
}
}