JavaScript ArcGIS PopupTemplate.content用法及代码示例

基本信息

以下是所在类或对象的基本信息。

AMD: require(["esri/PopupTemplate"], (PopupTemplate) => { /* code goes here */ });

ESM: import PopupTemplate from "@arcgis/core/PopupTemplate";

类： esri/PopupTemplate

继承: PopupTemplate > Accessor

自从：用于 JavaScript 4.0 的 ArcGIS API

用法说明

PopupTemplate.content函数(或属性)的定义如下：

content Content[] | String | Function | Promise autocast

用于定义和格式化弹出内容的模板。

String - 弹出窗口的内容可以是引用字段值的简单文本或字符串值，或拱廊表达式。表达式必须在表达式信息属性。
弹出元素- 您还可以将内容显示为弹出元素。有五种类型的元素可以单独使用或组合使用。它们的设置顺序决定了它们在弹出窗口中的显示方式。请参阅下面说明每个元素的项目。
- text- 一种TextContent提供说明性文本作为内容。
- media- 一种MediaContent用于显示图表/图像等媒体。
- fields- 一种FieldsContent.包含要在内容中显示的字段。如果这不是直接在content属性，弹出窗口将显示在PopupTemplate.fieldInfos属性。
- attachments- 一个AttachmentsContent包含与该函数关联的附件。
- custom- 一种CustomContent包含自定义内容。
promise- PopupTemplate 的内容也可以用解析为上述任何元素的承诺来定义。这对于调用方法或执行查询并希望在弹出窗口中显示结果的情况很有用。只需将 promise 传递给 popupTemplate 的内容，并确保它解析为字符串或其他弹出元素。
function- 可以使用返回上述任何元素的 JavaScript 函数定义内容。当您的弹出窗口需要比上面列出的四种内容类型提供的额外处理或函数时，这很有用。例如，假设您想使用第三方 JavaScript 库显示图表或将信息分类到单独的选项卡中。在这些情况下，您可以使用返回字符串、对 HTML 元素的引用、弹出元素或 Promise 的函数。单击该要素时，该要素将作为参数传递给该函数，并提供对该要素的图形和属性的访问。设置外场属性来指定呈现弹出窗口所需的任何字段。然后该函数执行并返回一个值以显示在弹出模板中。

从版本 4.12 开始，不能再使用通配符设置内容，例如* 。相反，将 Popup's defaultPopupTemplateEnabled 属性设置为 true 。此外，不再支持 out-of-the-box 格式化函数，例如 DateString 、 DateFormat 和 NumberFormat 。相反，设置 fieldInfos 并使用 FieldInfoFormat 类指定格式，以格式化 FieldInfo 中的任何数字或日期字段。有关如何执行此操作的示例，请参阅GeoJSONLayer sample。

例子：

// Set a simple string to a popupTemplate's content
// The string references a value from the POP_2015 attribute field
layer.popupTemplate = {
  content: "{POP_2015} people live in this census tract"
};

// Set a simple string to a popupTemplate's content
// referencing the value returned from an Arcade expression
layer.popupTemplate = {
  content: "{expression/per-asian}% of the people in this tract are Asian."
};

// Display a table in the popup's content referencing two values
// one from a field, and another returned from an Arcade expression
layer.popupTemplate = {
  title: "Population in {NAME}",
  content: [{
    type: "fields", // Autocasts as new FieldsContent()
    // Autocasts as new FieldInfo[]
    fieldInfos: [{
      fieldName: "POP_2015",
      label: "Total population (2015)",
      // Autocasts as new FieldInfoFormat()
      format: {
        digitSeparator: true
      }
    }, {
      fieldName: "expression/per-asian"
    }]
  }]
};

// The following snippet shows how to set various popup element types within the template's
// content. This snippet also works with related tables.
layer.popupTemplate.content = [{
  type: "fields", // Autocast as new FieldsContent()
  // Autocast as new FieldInfo[]
  fieldInfos: [{
    fieldName: "Point_Count",
    visible: false,
    label: "Count of Points",
    // Autocast as new FieldInfoFormat()
    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"
  }]
}, {
  // Autocasts as new TextContent()
  type: "text",
  text: "There are {Point_Count} trees within census block {BLOCKCE10}"
}, {

  // Autocasts as new MediaContent()
  type: "media",
  mediaInfos: [{
    title: "<b>Count by type</b>",
    type: "pie-chart", // Autocasts as new PieChartMediaInfo()
    caption: "",
    // Autocasts as new ChartMediaInfoValue()
    value: {
      fields: [ "relationships/0/Point_Count_COMMON" ],
      normalizeField: null,
      tooltipField: "relationships/0/COMMON"
    }
  }, {
    title: "<b>Mexican Fan Palm</b>",
    type: "image", // Autocasts as new ImageMediaInfo()
    caption: "tree species",
    // Autocasts as new ImageMediaInfoValue()
    value: {
      sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"
    }
  }]
}, {
  // if attachments are associated with feature, display it.
  // Autocasts as new AttachmentsContent()
  type: "attachments"
}];

// The following snippet shows how to use a function
// to create a simple node and display it in the popup template content
let template = new PopupTemplate({
  title: "Population by Gender",
  content: setContentInfo
});

function setContentInfo(feature){
  // create a chart for example
  let node = domConstruct.create("div", { innerHTML: "Text Element inside an HTML div element." });
  return node;
}

// The following snippet shows how to set a popupTemplate
// on the returned results (features) from identify

 idResult.feature.popupTemplate = {
   title: "{NAME}",
   content: [{
     // Pass in the fields to display
     type: "fields",
     fieldInfos: [{
       fieldName: "NAME",
       label: "Name"
     }, {
       fieldName: "REGION",
       label: "Region"
    }]
   }]
};

相关用法

注：本文由纯净天空筛选整理自arcgis.com大神的英文原创作品 PopupTemplate.content。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。