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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。