ArcGIS API for JavaScript开发之PopupTemplate

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",
  // 事件处理程序中用于引用操作的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();
  }
});

（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"
};