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

標籤：action   執行個體化   dem   arc   大括弧   features   vma   rip   tor   

上一篇文章中講到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~！

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