PopupTemplate

require(["esri/PopupTemplate"], function(PopupTemplate) { /* code goes here */ });

弹出模板为特定的层或图形格式化和定义弹出内容。弹出模板允许用户访问特性属性中的值，以及在选择视图中的特性时从Arcade表达式返回的值。
弹出模板包含标题和内容属性，它们充当模板，用于将特性的属性转换为HTML表示。语法{fieldName}或{expression/expressionName}执行参数替换。图形的默认行为是在单击图形后显示视图的弹出。默认行为需要一个弹出模板。
PopupTemplate还允许您格式化数字和日期字段值，并使用fieldInfos属性覆盖字段别名。还可以向模板添加操作，使用户能够执行与特性相关的操作，比如缩放到它，或者基于特性的位置或属性执行查询。

（1）actions

动作或动作切换对象的集合。每个对象代表一个动作或功能，可以通过单击弹出窗口中表示它们的图标或图像来执行。默认情况下，每个弹出窗口都有一个放大操作样式，带有一个放大镜图标。当单击此图标时，视图将以4个lod为中心以所选特性为中心。
弹出模板没有默认操作。若要使用弹出模板覆盖弹出窗口上的操作，请参阅覆盖操作。在弹出模板中定义的操作将只出现在应用该特定弹出模板的特性或层的弹出窗口中。
弹出窗口中每个动作的顺序与它们在动作集合中出现的顺序相同。
每次单击弹出窗口中的一个动作时，弹出窗口事件就会触发。此事件应用于为单击的每个操作执行自定义代码。例如，如果您想要向弹出模板添加一个放大操作，将视图放大到多个lod，那么您可以在单独的函数中定义放大代码。然后在触发动作事件处理程序中调用自定义缩放函数。
操作是用ActionButton或ActionToggle类中列出的属性定义的。
例子：

// 定义从所选特性中缩小的操作
var zoomOutAction = {// 此文本显示为工具提示title: "Zoom out",// 事件处理程序中用于引用操作的IDid: "zoom-out",// 设置用于设置动作按钮样式的图标字体className: "esri-icon-zoom-out-magnifying-glass"
};
//将自定义操作添加到弹出模板。
popupTemplate.actions.push(zoomOutAction);
// 应用这个弹出模板到一个层(或图形)
layer.popupTemplate = popupTemplate;
// 这个动作将只出现在该层的功能弹出窗口中// 单击放大操作时要执行的函数
function zoomOut() {// 在本例中，视图在每次单击时缩小两个lodview.goTo({center: view.center,zoom: view.zoom - 2});
}// 每次单击任何操作都会触发此事件
// 注意，此事件是在视图的默认弹出中处理的
//而不是在PopupTemplate的实例中处理的
view.popup.on("trigger-action", function(event){// 如果单击了放大操作，则启动zoomOut()函数if(event.action.id === "zoom-out"){zoomOut();}
});

（2）content

定义和格式化弹出窗口内容的模板。内容可以用四种类型的值之一定义。
（1）String
弹出窗口的内容可以是引用字段值或Arcade表达式的简单文本或字符串值。表达式必须在expressionInfos属性中定义。
（2）Popup elements
您还可以将内容显示为弹出元素。这些元素可以单独使用也可以组合使用。它们被设置的顺序决定了它们如何在弹出窗口中显示。参见下面描述每个元素的项。
text—提供描述性文本作为内容的文本内容元素。
media—媒体内容元素，用于显示媒体，如图表/图像。
fields—一个fields内容元素。包含要在内容中显示的字段。如果没有在content属性中直接设置，那么弹出窗口将显示在弹出模板中设置的内容。fieldInfos财产。
attachments—附件内容元素，包含与特性关联的附件。
（3）promise
弹出模板的内容也可以定义为解析为上述任何元素的承诺。这对于运行任务或执行查询并希望在弹出窗口中显示结果的情况非常有用。只需将承诺传递给popupTemplate的内容，并确保它解析为字符串或其他弹出元素。
（4）function
可以使用返回上述任何元素的JavaScript函数来定义内容。当您的弹出窗口需要额外的处理或功能，而不是上面列出的四种内容类型提供的功能时，这很有用。例如，假设您希望使用第三方JavaScript库显示图表，或者将信息分类到单独的选项卡中。在这些情况下，可以使用返回字符串、对HTML元素的引用、弹出元素或承诺的函数。当单击该特性时，该特性将作为参数传递给函数，并提供对该特性的图形和属性的访问。设置outFields属性以指定呈现弹出框所需的任何字段。然后该函数执行并返回一个值以显示在弹出模板中。

//为弹出模板的内容设置一个简单的字符串
//该字符串引用POP_2015属性字段中的一个值
layer.popupTemplate = {content: "{POP_2015} people live in this census tract"
};

//为弹出模板的内容设置一个简单的字符串
//该内容引用从Arcade表达式返回的值
layer.popupTemplate = {content: "{expression/per-asian}% of the people in this tract are Asian."
};

// 在弹出窗口的内容中显示引用两个值的表格
// 一个来自字段，另一个来自游乐场表情
layer.popupTemplate = {title: "Population in {NAME}",content: [{type: "fields", // 自动转换为new FieldInfo[]fieldInfos: [{fieldName: "POP_2015",label: "Total population (2015)",format: {digitSeparator: true}}, {fieldName: "expression/per-asian"}]}]
};

// 下面的代码片段展示了如何在模板的内容中设置各种弹出元素类型。
//此代码段也适用于相关表。
layer.popupTemplate.content = [{type: "fields", fieldInfos: [{fieldName: "Point_Count",visible: false,label: "Count of Points",format: {places: 0,digitSeparator: true}}, {fieldName: "relationships/0/Point_Count_COMMON",visible: true,label: "Sum of species tree count",format: {places: 0,digitSeparator: true},statisticType: "sum"}]
}, {type: "text",text: "There are {Point_Count} trees within census block {BLOCKCE10}"
}, {type: "media",mediaInfos: [{title: "<b>Count by type</b>",type: "pie-chart", caption: "",value: {fields: [ "relationships/0/Point_Count_COMMON" ],normalizeField: null,tooltipField: "relationships/0/COMMON"}}, {title: "<b>Mexican Fan Palm</b>",type: "image", caption: "tree species",value: {sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"}}]
}, {// 如果附件与特性关联，则显示它。type: "attachments"
}];

// 下面的代码片段展示了如何使用函数创建简单节点并在弹出模板内容中显示它
var template = new PopupTemplate({title: "Population by Gender",content: setContentInfo
});function setContentInfo(feature){// 例如，创建一个图表var node = domConstruct.create("div", { innerHTML: "Text Element inside an HTML div element." });return node;
}

// 下面的代码片段展示了如何在IdentifyTask返回的结果(特性)上设置弹出模板idResult.feature.popupTemplate = {title: "{NAME}",content: [{// 传入要显示的字段type: "fields",fieldInfos: [{fieldName: "NAME",label: "Name"}, {fieldName: "REGION",label: "Region"}]}]
};

（3）expressionInfos

引用Arcade表达式的对象数组或ExpressionInfo[]。

//在一个表中显示两个从Arcade表达式返回的值
layer.popupTemplate = {content: [{type: "fields", fieldInfos: [{fieldName: "expression/college"}, {fieldName: "expression/nocollege"}]}],// 自动转换到ExpressionInfo类expressionInfos: [{name: "college",title: "Completed a college degree",expression: "$feature.bachelor + $feature.master + $feature.doctorate"}, {name: "nocollege",title: "Did not complete a college degree",expression: "$feature.elementary + $feature.middle + $feature.highschool + $feature.somecollege"}]
};

// 在弹出模板内容中定义的简单字符串中显示从Arcade表达式返回的值
layer.popupTemplate = {content: "{expression/per-total}% of people in this boundary have a college education.",expressionInfos: [{name: "per-total",expression: "Round((($feature.bachelor + $feature.master + $feature.doctorate) / $feature.TOT_POP) * 100, 2)"}]
};

（4）fieldInfos

一个FieldInfo数组，定义数据集中的字段或来自Arcade表达式的值如何参与弹出。如果没有指定FieldInfo，将不会显示任何内容，因为弹出将只显示由该数组定义的字段。每个FieldInfo都包含单个字段或表达式的属性。这个属性可以在弹出模板或字段内容元素中直接设置。如果没有在fields内容元素中设置，它将默认为直接在PopupTemplate.fieldInfos中指定的内容。

// 这个片段演示了如何只显示字段的子集。
//通过设置'type: "fields"，并提供fieldInfos，
//只有字段数据将显示在这个特性层的弹出模板中。
//如果内容中没有直接指定fieldInfos，
//则弹出框默认为popupTemplate.fieldInfos中设置的内容。
var popupTemplate = new PopupTemplate({// autocasts as new PopupTemplate()title: "{NAME} in {COUNTY}",content: [{//也可以在弹出模板的内容之外直接设置fieldInfos。//如果内容中没有专门设置fieldInfos，//则默认为弹出模板中可能设置的内容。type: "fields",fieldInfos: [{fieldName: "B12001_calc_pctMarriedE",label: "Married %"},{fieldName: "B12001_calc_numMarriedE",label: "People Married",format: {digitSeparator: true,places: 0}}]}]
});

（5）lastEditInfoEnabled

指示是否应显示编辑器跟踪。

（6）layerOptions

可以为弹出层定义的附加选项。

（7）outFields

弹出模板中使用的字段名数组。使用此属性来指示完全呈现弹出模板需要哪些字段。如果通过函数设置内容，这一点很重要，因为成功呈现所需的任何字段都应该在这里指定。
要从所有字段获取值，使用["*"]。
这将不会从相关表中获取字段。如果需要相关的特性，使用FieldInfo设置。

// 使用指定的弹出模板设置MapImageLayerUSALayer = new MapImageLayer({url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",id: "USA",sublayers: [{id: 2,visible: true,popupTemplate: {title: "{state_name} Population",content: getInfo,outFields: ["*"]}}]
})// 用于弹出模板的函数
function getInfo(feature) {var graphic, attributes, content;graphic = feature.graphic;attributes = graphic.attributes;content =  "In year 2000:- " + attributes.pop2000 ;return content;
}

（8）overwriteActions

指示操作是否应该替换现有的弹出式操作。

//使用PopupTemplate时，在弹出窗口中定义的操作将不会显示。
//相反，将使用PopupTemplate中定义的操作。
popupTemplate.overwriteActions = true;

（9）relatedRecordsInfo

当在弹出窗口中处理相关记录时，RelatedRecordsInfo类提供了额外的排序选项。

（10）title

定义如何格式化弹出窗口中使用的标题的模板。可以通过指定字符串值或返回简单字符串或解析为字符串的promise(自4.15以来)的JavaScript函数来格式化标题。
如果使用函数，则定义的内容返回一个字符串值。当单击该特性时，该特性将作为参数传递给函数，并提供对该特性的图形和属性的访问。然后该函数执行并返回一个值，以显示在弹出模板的标题中。

// 在弹出模板中，占位符由“{}”表示。它指定要显示的属性。
//在一个服务中，名为NAME的字段包含一个县的名称，
//当用户单击表示洛杉矶县的特性时，弹出的标题将显示:“洛杉矶县的人口”
popupTemplate.title = "Population in {NAME} County";

// 在这个例子中，弹出模板的标题是通过一个函数设置的。
//函数名作为其属性被传入。注意，单击的特性随后被传递给函数。
var popupTemplate = {title: countyName,outFields: ["*"] // 确保指定了外域，以便在函数中可用;function countyName(feature) {// 返回层标题和个别县名称return feature.graphic.layer.title + " : {NAME}";
}

// 执行弹出模板标题中的路由任务，并将结果作为承诺返回。
//这将显示标题中该点的位置的地址
const locatorTask = new Locator({url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
});layer.popupTemplate = {title: function(event) {return locatorTask.locationToAddress({location: event.graphic.geometry}).then(function(response) {// This value must be a stringreturn response.address;});}
};

ArcGIS API for JavaScript开发之PopupTemplate相关推荐

ArcGIS API for JavaScript 开发笔记
1.Vue.js 中引入 ArcGIS API for JavaScript 4.x 安装 esri-loader npm install --save esri-loader 引入 ArcGIS A ...
ArcGIS API for JavaScript之基础篇（二）
ArcGIS API for JavaScript之基础篇(二) 上一篇文章介绍了Map MapView SceneView的基本知识以及简单的demo.最近几天学习了WebMap WebScene ...
01 ArcGIS API for JavaScript离线部署——部署到本地服务器
ArcGIS API for JavaScript开发的首要步骤就是引入ArcGIS想关的样式文件及开发包,对于此样式文件及开发包的引用有两种形式:在线引用和离线加载.对于一般的示例程序编写,我们只需 ...
Arcgis api for Javascript + arcgisServer + arcSDE笔记（1）
最近要搞的项目要用Arcgis api for Javascript做地图模块,自己开始学相关的技术.这是之前整理的笔记,现在传到博客上,也作为学习的记录 0 环境搭建 Arcgis软件统一使用10. ...
用ArcGIS API for JavaScript制作三维可视化图
前段时间接了一个项目,涉及到了空间信息三维可视化的工作.之前在网上查找无意中看到ArcGIS API for JavaScript(以下简称"ArcGIS API"或"该 ...
ESRI官网关于Javascript的内容(1)__获取ArcGIS API for Javascript
前言最近发现自己又可以静下心来学习了,所以赶紧去ESRI的开发官网上看了看,虽然英文我慢慢看也看得懂,但是我估计很多人是不想看或者说看不懂的,所以我觉得还是在我静的下心来的时候为自己和大家翻译一下~ ...
ArcGIS API for JavaScript 如何下载最新版
ArcGIS API for JavaScript以及ArcGIS 其他开发语言最新的开发包均可从developers网站进行下载. 网站链接:https://developers.arcgis.co ...
arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...

ArcGIS API for JavaScript开发之PopupTemplate

ArcGIS API for JavaScript 开发