ArcGIS API for JavaScript 4.2學習筆記[13] Layer的彈窗（PopupTemplate）

上一篇文章中講到Popup是一個彈窗，是View對象的默認內置彈窗，並且在View對象構造時就順便構造了。

那么這個PopupTemplate是什么呢？

后半截單詞Template是“模板”的意思，我最初理解就是可以定制的彈窗。仔細閱讀API ref后給出更為准確的定義：

PopupTemplate是一個針對Layer和Graphic的彈窗，它與Popup最大的不同的是作用對象不同（Popup主要是針對View）。它服務的對象是Layer中的要素類或者Graphic，它能從要素中獲取字段，並用HTML的語法顯示到彈窗的content屬性中去。

大白話說，PopupTemplate定制程度更高，很多時候復雜的數據顯示都要依靠PopupTemplate而不是簡單的Popup。

查詢得知，PopupTemplate的屬性比較少，但是保留了Popup的重要的屬性，如

actions、content、title

驚奇的發現，PopupTemplate的title和content有別於Popup的title和content，前者的title和content除了string類型外，還可以是一個方法，content更提供了Object[]的支持。這點很重要，對於后面要介紹的PopupTemplate with Function有關，這里先打個招呼，以后會詳細介紹的。

在這個例子中，數據是基於FeatureLayer的。不認識FeatureLayer無妨，就當是桌面版的FeatureLayer即可，擁有簡單的要素類和字段等。

---

 

給出引用

require(
    [
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ],
    function(Map, MapView, FeatureLayer){}
);

函數參數

function(Map, MapView, FeatureLayer){
    var map  = new Map({...});
    var view = new MapView({...});
    var template = {...};
    var featureLayer = new FeatureLayer({...});
    map.add(featureLayer);
}

抽出主干內容后，這個示例代碼就顯得十分簡潔：

1. 照例實例化Map和MapView

2. var一個template匿名對象，這個就是PopupTemplate對象

3. new一個FeatureLayer

4. 把featureLayer添加到map中

最關鍵的部分就是template這個匿名對象的內容和featureLayer這個對象如何與template綁定了，其他都不是難事。

template對象是怎么組織的呢？

仍然是抽取主干，看看template有些什么：

var template = {
    title: "Marriage in NY, Zip Code: {ZIP}",
    content: "...",
    fieldInfos: [{...},{...},{...}]
}

顯而易見，就是PopupTemplate的幾個關鍵屬性：title、content、fieldInfos

前兩個是標題和內容。在content里，就用HTML的語法顯示了“template”的威力：

content: "<p>As of 2015, <b>{MARRIEDRATE}%</b> of the population in this zip code is married.</p>" +
   "<ul><li>{MARRIED_CY} people are married</li>" +
   "<li>{NEVMARR_CY} have never married</li>" +
   "<li>{DIVORCD_CY} are divorced</li></ul>"

熟悉html語法的同學一定不陌生這幾個標簽是什么含義。但是——

{MARRIEDRATE}、{NEVMARR_CY}、{DIVORCD_CY}還有上面title的{ZIP}是什么鬼？

原來，這個就是featureLayer的各個字段名，當彈窗的時候，對應的字段值就會替換這個大括號。

那么fieldInfo里的Object數組又是什么？

fieldInfos: [
    {
      fieldName: "MARRIED_CY",
      format: {
        digitSeparator: true, 
        places: 0 
      }
    }, 
    {
      fieldName: "NEVMARR_CY",
      format: {//同上}
    },
    {
      fieldName: "DIVORCD_CY",
      format: {//同上}
    }
]

這里的//同上是完全相同的意思，為了省略就沒有再寫一次。

看得出，每一個Object里都含有fieldName，看來是和featureLayer的字段的字段名是對應的了。

而format，即格式，內含輸出到彈窗的數字格式，其中digitSeparator就是分隔符，如這樣的數字“10,000,000”，逗號就是分隔符；places就是小數位數。

所以這個fieldInfo也是描述數據及其格式的一個屬性。

那么，template這個PopupTemplate對象（匿名的）如何與featureLayer綁定呢？

彈窗與要素圖層綁定

其實，featureLayer里有一個屬性，叫popupTemplate。這就很容易懂了吧？上代碼：

var featureLayer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
  outFields: ["*"],
  popupTemplate: template
});

其他什么的先不管，featureLayer這個對象綁定PopupTemplate的方法就是將template對象之間賦值給featureLayer的popupTemplate屬性。

好了，我們來看看結果：

結果很明顯了，剛剛設置的所有格式都在彈窗上有對應的顯示。

MapView中多了一層矢量的圖層，這是featureLayer。（看得出ESRI對矢量圖形的描邊算法還不是很好，尖銳的地方處理的不如桌面版的好，應該是緩沖區算法出的毛病）

---

總結一下。

給特定的要素圖層或者圖形設置定制好的彈窗步驟如下：

1. 實例化map和view對象

2. 創建PopupTemplate對象，可以匿名創建也可以new創建

3. 創建featureLayer時在構造函數中把popupTemplate屬性賦值即可。

4. map中添加featureLayer

over~！