PopupTemplate
PopupTemplate为特定的图层或图形定义弹出窗口的内容和格式。弹出模板允许用户访问特性属性中的值，以及在选择视图中的特性时从Arcade表达式返回的值。
弹出模板包含标题和内容属性，它们充当模板，用于将特性的属性转换为HTML表示。语法{fieldName}或{expression/expressionName}执行参数替换。图形的默认行为是在单击图形后显示视图的弹出。默认行为需要一个弹出模板。
PopupTemplate还允许您格式化数字和日期字段值，并使用fieldInfos属性覆盖字段别名。还可以将操作添加到模板中，使用户能够执行与特性相关的操作，例如缩放到它或基于特性的位置或属性执行查询。
弹出模板也可能包含自定义操作。当单击时，这些操作将执行开发人员定义的自定义代码。
构造函数
new PopupTemplate(properties)
const layer1 = FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/2012_CA_NHTSA/FeatureServer/0",
});
var basemap=Basemap.fromId("topo-vector");
const map = new Map({
});
map.layers.addMany([layer1]);
const view = new MapView({
container: 'mapDivRef',
map: map,
});
//{name}是要素的属性字段名
var popupTemplate=new PopupTemplate({
title: '{OBJECTID}',
content: "{sex}" +
"{latitude},{longitude}" +
"<ul><li>{age}</li>" +
"<li>{alcres}</li>" +
"<li>{numfatal},{conszone},{atmcond}</li><ul>",
});
layer1.popupTemplate=popupTemplate;
属性概述
actions：动作或动作切换对象的集合。
content：定义和格式化弹出窗口内容的模板。
expressionInfos：引用Arcade表达式的对象数组或ExpressionInfo[]。
fieldInfos：一个FieldInfo数组，定义数据集中的字段或来自Arcade表达式的值如何参与弹出。
lastEditInfoEnabled：指示是否应显示编辑器跟踪。
layerOptions：可以为弹出层定义的附加选项。
outFields：弹出模板中使用的字段名数组。
overwriteActions：指示操作是否应该替换现有的弹出式操作。
relatedRecordsInfo：当在弹出窗口中处理相关记录时，RelatedRecordsInfo类提供了额外的排序选项。
title：定义如何格式化弹出窗口中使用的标题的模板。
属性简述
actions:动作或动作切换对象的集合。每个对象代表一个动作或功能，可以通过单击弹出窗口中表示它们的图标或图像来执行。默认情况下，每个弹出窗口都有一个带有放大镜图标的zoom-to动作。单击此图标时，视图将缩放四个lod，并以选定的特性为中心。
弹出模板没有默认操作。若要使用弹出模板覆盖弹出窗口上的操作，请参阅覆盖操作。在弹出模板中定义的操作将只出现在应用该特定弹出模板的特性或层的弹出窗口中。
每次单击弹出窗口中的一个动作时，弹出窗口事件就会触发。此事件应用于为单击的每个操作执行自定义代码。例如，如果您想要向弹出模板添加一个放大操作，将视图放大到多个lod，那么您可以在一个单独的函数中定义放大代码。然后在触发动作事件处理程序中调用自定义缩放函数。有关其工作原理的更多细节，请参阅下面的示例代码片段。
// 定义从所选特性中缩小的操作
var zoomOutAction = {
// 此文本显示为工具提示
title: "Zoom out",
// 在事件处理程序中引用操作所使用的ID
id: "zoom-out",
//设置用于设置操作按钮样式的图标字体
className: "esri-icon-zoom-out-magnifying-glass"
};
// 将自定义操作添加到弹出模板。
popupTemplate.actions.push(zoomOutAction);
// 应用这个弹出模板到一个图层(或图形)
layer.popupTemplate = popupTemplate;
// 这个动作将只出现在该层的功能弹出窗口中
// 当单击缩小动作时要执行的函数
function zoomOut() {
// 在本例中，视图在每次单击时缩小两个lod
view.goTo({
center: view.center,
zoom: view.zoom - 2
});
}
// 每次单击任何操作都会触发此事件
// 注意，这个事件是在视图的默认弹出中处理的
// 不是在PopupTemplate的实例上
view.popup.on("trigger-action", function(event){
// 如果单击了放大操作，则启动zoomOut()函数
if(event.action.id === "zoom-out"){
zoomOut();
}
});
content（Content[]|String|Function|Promiseautocast）
定义和格式化弹出窗口内容的模板。
- String - 弹出窗口的内容可以是引用字段值或Arcade表达式的简单文本或字符串值。表达式必须在expressionInfos属性中定义。
- Popup elements - 您还可以将内容显示为弹出元素。有五种类型的元素可以单独使用或组合使用。它们被设置的顺序决定了它们如何在弹出窗口中显示。参见下面描述每个元素的项。
- text -提供描述性文本作为内容的文本内容元素。
- media - 一种媒体内容元素，用于显示诸如图表/图像之类的媒体。
- fields -一个字段内容元素。包含要在内容中显示的字段。如果没有在content属性中直接设置，那么弹出窗口将显示在弹出模板中设置的内容。
- attachments - 附件内容元素，包含与特性关联的附件。
- custom -包含自定义内容的自定义内容元素。
- promise -弹出模板的内容也可以定义为解析为上述任何元素的承诺。这对于运行任务或执行查询并希望在弹出窗口中显示结果的情况非常有用。只需将承诺传递给popupTemplate的内容，并确保它解析为字符串或其他弹出元素。
- function -可以使用返回上述任何元素的JavaScript函数来定义内容。当您的弹出窗口需要额外的处理或功能，而不是上面列出的四种内容类型提供的功能时，这很有用。例如，假设您希望使用第三方JavaScript库显示图表，或者将信息分类到单独的选项卡中。在这些情况下，可以使用返回字符串、对HTML元素的引用、弹出元素或承诺的函数。当单击该特性时，该特性将作为参数传递给函数。
// 在弹出窗口的内容中显示引用两个值的表格
const layer1 = FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/AidsView_NewYork/FeatureServer/0",
});
var basemap=Basemap.fromId("topo-vector");
const map = new Map({
});
map.layers.addMany([layer1]);
const view = new MapView({
container: 'mapDivRef',
map: map,
});
layer1.popupTemplate={
title: '弹出层',
outFields: ["*"],
content: [{
type: "fields",
fieldInfos: [{
fieldName: "PO_NAME",
label: "名称是",
// visible: true,
format: {
digitSeparator: true
}
},{
fieldName: "MALES",
label: "公里数",
format: {
digitSeparator: true
}
}]
}]
}
// 下面的代码片段展示了如何在模板中设置各种弹出元素类型内容。此代码段也适用于相关表。
layer1.popupTemplate={
title:'弹出层',
outFields: ["*"],
content: [
{
type: 'fields',
fieldInfos: [{
fieldName: "STATE",
visible: false,
label: "状态是",
format: {
places: 0,
digitSeparator: true
}
},
{
fieldName: "PO_NAME",
visible: true,
label: '名称是',
format: {
places: 0,
digitSeparator: true
},
statisticType: 'sum'
}]
},
{
type: "text",
text: "其他信息{ObjectID},{ZIP},{WHITE},{AMERI_ES},{ASIAN}"
},
{
type: 'media',
mediaInfos: [
{
title: '<b>chart</b>',
type: 'pie-chart',
caption: '',
value: {
fields: ["Point_Count"],
normalizeField: null,
tooltipField: "Point_Count"
}
},
{
title: "picture",
type:'image',
caption: "",
value: {
sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"
}
}
]
}]}
// 下面的代码片段展示了如何使用函数创建一个简单的节点，并在弹出模板内容中显示它
var template = new PopupTemplate({
title: '弹出层四',
content: this.setContent(domConstruct)
});
layer1.popupTemplate = template;
setContent(domConstruct){
var node = domConstruct.create("div", { innerHTML: "用方法创建内容" });
return node;
}
// 下面的代码片段展示了如何在IdentifyTask返回的结果(特性)上设置弹出模板
idResult.feature.popupTemplate = {
title: "{NAME}",
content: [{
//传入要显示的字段
type: "fields",
fieldInfos: [{
fieldName: "NAME",
label: "Name"
}, {
fieldName: "REGION",
label: "Region"
}]
}]
};
expressionInfos
// 在一个表中显示两个从Arcade expressions返回的值，当一个特性被点击的时候
layer1.popupTemplate=new PopupTemplate({
content: [{
type: 'fields',
fieldInfos: [{
fieldName: 'expression/PO_NAME'
},{
fieldName: 'expression/STATE'
}]
}],
expressionInfos: [{
name: 'PO_NAME',
title: 'PO_NAME',
expression: "$feature.PO_NAME"
},{
name: "STATE",
title: "STATE",
expression: "$feature.STATE"
}]
});
// 在弹出模板内容中定义的简单字符串中显示从Arcade表达式返回的值
layer1.popupTemplate=new PopupTemplate({
title: '男女比例',
content: "{expression/MALES}%男女比例",
expressionInfos: [{
name: "MALES",
expression: "Round(($feature.MALES/($feature.MALES + $feature.FEMALES)) * 100, 2)"
}]
});
fieldInfos
一个FieldInfo数组，定义数据集中的字段或来自Arcade表达式的值如何参与弹出。如果没有指定FieldInfo，则不会显示任何内容，因为弹出窗口将只显示由该数组定义的字段。每个FieldInfo都包含单个字段或表达式的属性。这个属性可以在弹出模板中直接设置，也可以在字段内容元素中设置。如果没有在fields内容元素中设置，它将默认为直接在PopupTemplate.fieldInfos中指定的内容。左边的图像是使用下面第一个示例代码片段的结果，而右边的图像是第二个代码片段的结果。
使用此fieldInfos属性为图表或文本元素中显示的数字指定格式化选项。
// 这个片段演示了如何只显示字段的子集。
// 通过设置'type: "fields"，并提供fieldInfos，
// 只有字段数据将显示在这个功能层的弹出模板中。
//如果内容中没有直接指定fieldInfos，则弹出框默认为popupTemplate.fieldInfos中设置的内容。
var template = new PopupTemplate({
title: '{PO_NAME}',
outFields: ["*"],
content: [{
type: "fields",
fieldInfos: [{
fieldName: "MALES",
label: '男性人数',
},{
fieldName: "FEMALES",
label: '女性人数',
format: {
digitSeparator: true,
places: 0
}
}
]
}]
});
layer1.popupTemplate=template
// 这个片段演示了通过引用popupTemplate的fieldInfos中定义的特定字段来设置弹出框的内容。
var templateMo = new PopupTemplate({
title: "{MALES} in {PO_NAME}",
outFields: ["*"],
content: "{PO_NAME}州的男性人数是{MALES}，女性数量是{FEMALES}",
fieldInfos: [{
fieldName: "MALES",
},{
fieldName: 'FEMALES',
format: {
places: 0,
digitSeparator: true
}
}
]
});
layer1.popupTemplate=templateMo;
outFields
弹出模板中使用的字段名数组。使用此属性来指示需要哪些字段来完全呈现弹出模板。如果通过函数设置内容，这一点很重要，因为成功呈现所需的任何字段都应该在这里指定。
一般来说，在实例化一个新的弹出模板时始终设置这个属性是一个好的实践。如果特性层没有指定它的外域，模板的外域也没有设置，那么返回的弹出窗口的几何图形将永远不会返回。这也适用于WebMaps。如果需要访问webmap层的几何图形，请确保指定了外域。
要从所有字段获取值，使用["*"]。默认值null。
// 使用指定的弹出模板设置MapImageLayer
var usaLayer= new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
id: "USA",
sublayers: [{
id: 3,
visible: true,
popupTemplate: {
title: "{state_name} Population",
content: this.getInfo,
outFields: ["*"]
}
}]
});
map.addMany([usaLayer])
//用于弹出模板的函数
getInfo(feature){
var graphic, attributes, content;
graphic = feature.graphic;
attributes = graphic.attributes;
content = "州名是" + attributes.state_name;
return content;
}
overwriteActions
指示操作是否应该替换现有的弹出式操作。默认值:false
// 当使用PopupTemplate时，在弹出窗口中定义的操作将不会显示。相反，将使用PopupTemplate中定义的操作。
popupTemplate.overwriteActions = true;
relatedRecordsInfo
当在弹出窗口中处理相关记录时，RelatedRecordsInfo类提供了额外的排序选项。
方法概述
clone()：创建PopupTemplate对象的深度克隆。
fromJSON()：创建这个类的一个新实例，并使用ArcGIS平台中产品生成的JSON对象的值对其进行初始化。
toJSON()：将此类的实例转换为其ArcGIS门户JSON表示。
版权声明：
作者：Gomo
链接：https://www.develophm.com/index.php/popuptemplate/655/
来源：开发之家
文章版权归作者所有，未经允许请勿转载。
共有 0 条评论