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~！