[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中屬性字段值的多種表現形式

時間 2019-11-20

標籤 arcgis api javascript 4.8 sample code popups popuptemplate 概念 popup 屬性字段多種表現形式欄目 JavaScript 简体版

原文原文鏈接

【官方文檔：https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html】javascript

1、Intro to PopupTemplate(關於popup模板)css

popups(彈出框)提供了一種簡便的方式去查看layers(圖層)或者graphics(圖形)的屬性信息。它也能夠展現鼠標在view(視圖)中的點擊位置的座標等其餘相關信息。在ArcMap中，查看要素圖層(shapefile)的屬性須要打開attribute table(屬性表)。在地圖中選擇想查看信息的要素，在屬性表中會高亮顯示那一行；或者，在表中找到關心的那一行，在地圖中會高亮顯示那一個要素。除了在屬性表中能夠看到要素的屬性字段值，也能夠打開標註，但這樣只能在地圖中展現一個字段的值。html

ArcGIS Pro、ArcGIS Online、Portal中出現了popup的概念，點擊地圖中關心的要素（點、線或面），就會彈出一個彈出框，以表格、文本、圖表、圖片等形式展示所選擇要素的屬性信息。這個彈出框就是popup。java

每個view(視圖)都有一個popup，可是這個popup所展示的內容和展示這些內容所採用的形式、格式是由每個圖層(layer)決定的。若是不對popup進行自定義的設置（不對popupTemplate進行設置），popup會以默認表格的形式展現當前圖層要素的全部字段值。API提供了popupTemplate(popup模板)的概念，容許用戶自定義popup，回答要展示哪些字段值、怎樣展示這些值的問題。git

1.代碼骨架數組

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <!-- 移動端優化 -->
 6         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 7         <title>Intro to PopupTemplate</title>
 8         
 9         <!-- JS API的引入 -->
10         <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
11         <script src="https://js.arcgis.com/4.8/"></script>
12         
13         <!-- 設置style以正確顯示地圖 -->
14         <style>
15             html,body,#viewDiv{
16                 padding:0;
17                 margin:0;
18                 height:100%;
19                 width:100%;
20             }
21         </style>
22         
23         <script>
24             
25         </script>
26     </head>
27     
28     <body>
29         <div id="viewDiv"></div>
30     </body>
31 </html>

其中，包括JS API的引入、style樣式的設置等等。dom

2.基礎語句ssh

 1 <script>
 2     require([
 3         "esri/Map",
 4         "esri/views/MapView",
 5         "esri/layers/FeatureLayer",  //以展現FeatureLayer的popup爲例
 6         "dojo/domReady!"
 7         ],function(Map,MapView,FeatureLayer){
 8             //建立Map（實例化）
 9             var map=new Map({
10                 basemap:"gray",
11             });
12                     
13             //建立MapView（實例化）
14             var view=new MapView({
15                 container:"viewDiv",
16                 map:map,
17                 center:[-73.950,40.702],
18                 zoom:11
19             });
20                     
21             //建立FeatureLayer（實例化）
22             var featureLayer=new FeatureLayer({
23                 url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
24                 outFields:["*"]
25             });
26                     
27             //將新建立的FeatureLayer添加到map中
28             map.layers.add(featureLayer);
29 });
30</script>

上面語句建立了地圖(Map)與和視圖(MapView)，並將地圖綁定到了視圖中。建立了一個FeatureLayer(要素圖層)並添加到了Map實例中。關於Map和MapView的概念，請查看：http://www.javashuo.com/article/p-nixaigdp-g.html。ide

此時出現了底圖和featureLayer，可是點擊這個圖層上的面狀要素，並不會彈出popup。函數

3.編寫popupTemplate模板標題

1 var template={  //autocasts as new popupTemplate()（一個概念）
2//{ZIP}指向當前圖層要素的ZIP屬性字段值
3     title:"Marriage in NY,Zip Code:{ZIP}"
4 };
5                     
6//featureLayer的popup將使用本身設置的模板
7 featureLayer.popupTemplate=template;

建立了一個模板並對模板的標題進行了設置，顯示所選擇圖層要素的ZIP字段值，這個標題就是popup彈出框的標題。使用{field}這種形式引用圖層要素的某一個字段值。這裏有一個JavaScript API中很重要的概念：autocast。這裏建立了一個對象（變量）template，並無按照var template=new PopupTemplate({ //some codes })這種形式，甚至在require()中都沒有引入esri/PopupTemplate模塊。可是上面的代碼中卻使用了popupTemplate實例的屬性title。這種用法是能夠的，也是常常會用到的，這就是autocast的概念。有關autocast的更多信息，請查看：https://developers.arcgis.com/javascript/latest/guide/autocasting/index.html。

只包括title標題的模板建立完成後，將它賦給featureLayer的popupTemplate屬性。當點擊featureLayer中的要素時，就會按照這個自定義模板的形式彈出popup，展現相關的內容。

4.編寫popupTemplate模板主體內容

 1 var template={  //autocasts as new popupTemplate()（一個概念）
 2//{ZIP}指向當前圖層要素的ZIP屬性字段值
 3     title:"Marriage in NY,Zip Code:{ZIP}",
 4     content:[{
 5         type:"fields",
 6         fieldInfos:[{
 7             fieldName:"MARRIEDRATE",
 8             label:"Married %",
 9             visible:true
10         },{
11             fieldName:"MARRIED_CY",
12             label:"People Married",
13             visible:true
14         },{
15             fieldName:"NEVMARR_CY",
16             label:"People that Never Married",
17             visible:true
18         },{
19             fieldName:"DIVORCD_CY",
20             label:"People Divorced",
21             visible:true
22         }] 23     }] 24 };

content是popupTemplate的主體內容，它的值是一個對象數組，按照這種形式：content:[{obj 1},{obj 2},...,{obj n}]。即在popup中能夠顯示不少種內容（obj 1規定的、obj 2規定的內容等等）。上面代碼只規定了一個obj1，它設置了字段值以表格的形式展現（還能夠以文本、圖表、圖片等形式展現）。obj1中有兩個屬性，第一個是type（這裏是"fields"），用於標識這段內容想展現什麼樣的數據；第二個是fieldInfos（根據type的不一樣而不一樣），設置要展現的字段值以及展現的格式。其中，fieldInfos的形式是這樣的：fieldInfos:[{filed 1},{field 2},...,{field n}]，圖層要素可能包含不少的字段值，但這裏只展現關心感興趣的值。field 1中包含的屬性有fieldName，字段名字；label，該字段在popup中展現時所用的名字；visible，設置這個字段是否顯示出來，若是是false，即便對這個字段值進行了設置，也不在popup中顯示。

這樣的寫法很容易看錯，要注意層次關係和大括號的匹配。層次關係以下：

 1 content:[  //content開始
 2                         
 3 {//obj1(fields)
 4     type:"fields",
 5     fieldInfos:[{
 6         //field1
 7         //some codes
 8     },{
 9         //field2
10         //some codes
11     }]
12 },
13                         
14 {//obj2(text)
15     type:"text",
16     text:""
17 },
18                         
19 {//obj3(media)
20     type:"media",
21     mediaInfos:[{
22         //media1  pie-chart
23         //some codes
24     },{
25         //media2  image
26         //some codes
27     }]
28 },
29                         
30 {//obj4(attachment)
31     type:"attachment"32     // some codes35 }
36                         
37 ]  //content結束

上面要展現的4個內容(obj一、obj二、obj三、obj4)對應着fields、text、media(圖表或圖片)、attachment這4種展現信息的形式，在後文中會講到。

5.格式化顯示數字數據

能夠設置千分位符（當數字大於1000，顯示小數點，不肯定當數字大於1000000是否會顯示兩個小數點）、小數點位以達到更好的顯示效果。

1 format:{
2     digitSeparator:true,  //設置千分位符
3     places:0  //小數點保留0位（四捨五入到整數）
4 }

format是fieldInfos中的一個屬性，寫在fieldInfos中。

6.將自定義的template賦給featureLayer的popupTemplate屬性

（由於前面要演示popup的效果，已經進行了賦值）。將自定義的template(popup模板)賦值給圖層的popupTemplate屬性，就能夠用本身定義的popup形式展現所點擊要素的屬性內容。

有兩種方法能夠實現。一是在featureLayer的構造函數中設置popupTemplate屬性，即在建立featureLayer時將以前已經寫好代碼的template賦給popupTemplate；二是調用代碼將template賦值給圖層的popupTemplate屬性，這適用於在建立圖層時尚未寫好template的狀況。

方法一：

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

方法二：

1 featureLayer.popupTemplate=template;

7.最終代碼及運行效果

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <!-- 移動端優化 -->
 6         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 7         <title>Intro to PopupTemplate</title>
 8         
 9         <!-- JS API的引入 -->
10         <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
11         <script src="https://js.arcgis.com/4.8/"></script>
12         
13         <!-- 設置style以正確顯示地圖 -->
14         <style> 
15             html,body,#viewDiv{
16                 padding:0;
17                 margin:0; 
18                 height:100%;
19                 width:100%;
20             }
21         </style>
22         
23         <script>
24             require([
25                 "esri/Map",
26                 "esri/views/MapView",
27                 "esri/layers/FeatureLayer",  //以展現FeatureLayer的popup爲例
28                 "dojo/domReady!"
29                 ],function(Map,MapView,FeatureLayer){
30                     //建立Map（實例化）
31                     var map=new Map({
32                         basemap:"gray",
33                     });
34                     
35                     //建立MapView（實例化）
36                     var view=new MapView({
37                         container:"viewDiv",
38                         map:map,
39                         center:[-73.950,40.702],
40                         zoom:11
41                     });
42                     
43                     //建立FeatureLayer（實例化）
44                     var featureLayer=new FeatureLayer({
45                         url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
46                         outFields:["*"]
47                     });
48                     
49                     //將新建立的FeatureLayer添加到map中
50                     map.layers.add(featureLayer);
51                     
52                     var template={  //autocasts as new popupTemplate()（一個概念）
53                         //{ZIP}指向當前圖層要素的ZIP屬性字段值
54                         title:"Marriage in NY,Zip Code:{ZIP}",
55                         content:[{
56                             type:"fields",
57                             fieldInfos:[{
58                                 fieldName:"MARRIEDRATE",
59                                 label:"Married %",
60                                 visible:true
61                             },{
62                                 fieldName:"MARRIED_CY",
63                                 label:"People Married",
64                                 visible:true,
65                                 format:{
66                                     digitSeparator:true,  //設置千分位符
67                                     places:0  //小數點保留0位（四捨五入到整數）
68                                 }
69                             },{
70                                 fieldName:"NEVMARR_CY",
71                                 label:"People that Never Married",
72                                 visible:true,
73                                 format:{
74                                     digitSeparator:true,
75                                     places:0
76                                 }
77                             },{
78                                 fieldName:"DIVORCD_CY",
79                                 label:"People Divorced",
80                                 visible:true,
81                                 format:{
82                                     digitSeparator:true,
83                                     places:0
84                                 }
85                             }]
86                         }]    
87                     };
88                     
89                     //featureLayer的popup將使用本身設置的模板
90                     featureLayer.popupTemplate=template;
91             });
92         </script>
93     </head>
94     
95     <body>
96         <div id="viewDiv"></div>
97     </body>
98 </html>

最終代碼

2、Multiple popup elements(popup中的多種元素)

除了以表格形式，在popup中還能夠經過文本、圖表、圖片或其餘與圖層有關的附件（attachment）來表示圖層要素的字段值。這些內容在popup彈出框中顯示的順序由在popupTemplate中編寫的順序決定。這個例子展現了在popup中顯示屬性字段表格、文本、圖片以及由字段值生成的圖表。

1.基本代碼

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 6         <title>Mutiple popup elements</title>
 7         
 8         <!-- JS API的引入 -->
 9         <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
10         <script src="https://js.arcgis.com/4.8/"></script>
11         
12         <!-- 設置style，以正確顯示地圖 -->
13         <style>
14             html,body,#viewDiv{
15                 padding:0;
16                 margin:0;
17                 height:100%;
18                 width:100%;
19             } 
20         </style>
21         
22         <script>
23             require([
24                 "esri/Map",
25                 "esri/views/MapView",
26                 "esri/layers/FeatureLayer",
27                 "dojo/domReady!"
28                 ],function(Map,MapView,FeatureLayer){
29                     //建立地圖（實例化）
30                     var map=new Map({
31                         basemap:"hybrid"
32                     });
33                     
34                     //建立視圖（實例化）
35                     var view=new MapView({    
36                         container:"viewDiv",
37                         map:map,
38                         center:[-118.3994,34.0871],
39                         zoom:17,
40                         
41                         //固定popup，取消浮動
42                         popup:{
43                             dockEnabled:true,  //將popup固定住
44                             dockOptions:{
45                                 buttonEnabld:false,  //將切換固定狀態的那個按鈕隱藏掉
46                                 breakpoint:false  //不明白什麼做用，可是若是是true或去掉不寫，popup將不固定
47                             }
48                         }
49                     });
50 
51                     var featureLayer=new FeatureLayer({
52                         url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
53                         outFields:["*"]
54                     });
55                     
56                     //將featureLayer添加到map中
57                     map.layers.add(featureLayer);        
58             });
59         </script>
60     </head>
61     
62     <body>
63         <div id="viewDiv"></div>
64     </body>
65 </html>

由於這個例子中popup裏面的內容比較多，爲了更好的表現效果，將popup固定。popup是view的一個屬性，在popup中，將dockEnabled設置爲true，並將dockOptions屬性下的兩個屬性buttonEnabled和breakpoint設置爲false，便可固定popup。

當前運行結果顯示底圖和圖層，但點擊圖層要素不會彈出popup。

2.設置popupTemplate

1 var featureLayer=new FeatureLayer({
2     url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
3     outFields:["*"],
4     popupTemplate:{  //添加popupTemplate屬性 5     }
6 });

在FeatureLayer的構造函數中添加popupTemplate屬性，並用空括號給它賦值。屬性雖然是空的，可是開啓了圖層要素的popup。如今再點擊要素，會彈出一個空的popup。

在popupTemplate屬性中編寫自定義的popup樣式，這是直接在構造featureLayer時完成的，即在其構造函數中完成。而上一個例子是在FeatureLayer的構造函數外定義了一個模板，再賦值給featureLayer的popupTemplate屬性。兩種方式均可以。

①編寫popupTemplate標題

1 popupTemplate:{
2//在popupTemplate中可使用HTML標籤，以達到更好的表現效果
3     title:"<font color='#008000'>Beverly Hillstrees by block",
4     content:[{
5     }]
6 }

在popupTemplate中出現字符串的地方，均可以使用HTML標籤對字符進行符號化設置，以達到更好的效果。上面在title中爲標題設置了'#008000'顏色（綠色）。popup中最主要的內容要寫在content中。content中代碼的層次關係和上一個例子同樣。

②編寫popupTemplate中的fields(字段值)

 1 popupTemplate:{
 2//在popupTemplate中可使用HTML標籤，以達到更好的表現效果
 3     title:"<font color='#008000'>Beverly Hillstrees by block",
 4     content:[{
 5         type:"fields",
 6         fieldInfos:[{  //fieldInfos 開始  7             fieldName:"Point_Count",
 8             label:"Count of Points",
 9             visible:true,
10             format:{
11                 digitSeparator:true,
12                 places:0
13             }
14         },{
15             fieldName:"relationships/0/Point_Count_COMMON",
16             label:"Sum of species tree count",
17             statisticType:"sum",  //須要有這一句，否則結果是空（緣由未知）
18             visible:true,
19             format:{
20                 digitSeparator:true,
21                 places:0
22             }
23         },{
24             fieldName:"relationships/0/COMMON",
25             label:"Common Name",
26             visible:true
27         },{
28             fieldName:"BLOCKCE10",
29             label:"Block",
30             visible:true
31         }]  //fieldInfos 結束 32     }] 33 }

fieldName是要表現的圖層要素的屬性字段名稱（存儲在數據中的名稱），label是在popup中顯示的字段名稱，visible設置該字段是否在popup中顯示，format設置一些顯示格式。

③編寫popupTemplate中的text(文本值)

 1 popupTemplate:{
 2//在popupTemplate中可使用HTML標籤，以達到更好的表現效果
 3     title:"<font color='#008000'>Beverly Hillstrees by block",
 4     content:[{  5         type:"fields",
 6         fieldInfos:[{  
 7             fieldName:"Point_Count",
 8             label:"Count of Points",
 9             visible:true,
10             format:{
11                 digitSeparator:true,
12                 places:0
13             }
14         },{
15             fieldName:"relationships/0/Point_Count_COMMON",
16             label:"Sum of species tree count",
17             statisticType:"sum",  //須要有這一句，否則結果是空（緣由未知）
18             visible:true,
19             format:{
20                 digitSeparator:true,
21                 places:0
22             }
23         },{
24             fieldName:"relationships/0/COMMON",
25             label:"Common Name",
26             visible:true
27         },{
28             fieldName:"BLOCKCE10",
29             label:"Block",
30             visible:true
31         }] 32     },{ 33         type:"text",
34         text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
35     }]
36 }

④編寫popupTemplate中media(圖表、圖片)

 1 popupTemplate:{
 2//在popupTemplate中可使用HTML標籤，以達到更好的表現效果
 3     title:"<font color='#008000'>Beverly Hillstrees by block",
 4     content:[{
 5         type:"fields",
 6         fieldInfos:[{
 7             fieldName:"Point_Count",
 8             label:"Count of Points",
 9             visible:true,
10             format:{
11                 digitSeparator:true,
12                 places:0
13             }
14         },{
15             fieldName:"relationships/0/Point_Count_COMMON",
16             label:"Sum of species tree count",
17             statisticType:"sum",  //須要有這一句，否則結果是空（緣由未知）
18             visible:true,
19             format:{
20                 digitSeparator:true,
21                 places:0
22             }
23         },{
24             fieldName:"relationships/0/COMMON",
25             label:"Common Name",
26             visible:true
27         },{
28             fieldName:"BLOCKCE10",
29             label:"Block",
30             visible:true
31         }]
32     },{
33         type:"text",
34         text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
35     },{ 36         type:"media",
37         mediaInfos:[{ 38             title:"Count by type",  //media內容下的標題
39             type:"pie-chart",  //餅圖
40             caption:"one pie-chart",  //圖表的標題
41             value:{
42                 theme:"Grasshopper",  //圖表的主題樣式
43                 //一系列設置餅圖的參數，涉及到related table的知識
44                 fields:["relationships/0/Point_Count_COMMON"],
45                 normalizeField:null,
46                 tooltipField:"relationships/0/COMMON"
47             }
48         },{ 49             title:"Welcome to Beverly Hills",
50             type:"image",  //圖片
51             value:{
52                 sourceURL:"https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg" //圖片URL
53             }
54         }] 55     }] 56 }

對於每個內容來講（字段表格、文本、圖表、圖片）均可以有一個標題。除了這幾種類型外，popup中還能夠添加一種attachment類型的內容。官方文檔中未給出相應例子。

3.最終代碼及運行效果

  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  6         <title>Mutiple popup elements</title>
  7         
  8         <!-- JS API的引入 -->
  9         <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
 10         <script src="https://js.arcgis.com/4.8/"></script>
 11         
 12         <!-- 設置style，以正確顯示地圖 -->
 13         <style>
 14             html,body,#viewDiv{
 15                 padding:0;
 16                 margin:0;
 17                 height:100%;
 18                 width:100%;
 19             } 
 20         </style>
 21         
 22         <script>
 23             require([
 24                 "esri/Map",
 25                 "esri/views/MapView",
 26                 "esri/layers/FeatureLayer",
 27                 "dojo/domReady!"
 28                 ],function(Map,MapView,FeatureLayer){
 29                     //建立地圖（實例化）
 30                     var map=new Map({
 31                         basemap:"hybrid"
 32                     });
 33                     
 34                     //建立視圖（實例化）
 35                     var view=new MapView({    
 36                         container:"viewDiv",
 37                         map:map,
 38                         center:[-118.3994,34.0871],
 39                         zoom:17,
 40                         
 41                         //固定popup，取消浮動
 42                         popup:{
 43                             dockEnabled:true,  //將popup固定住
 44                             dockOptions:{
 45                                 buttonEnabld:false,  //將切換固定狀態的那個按鈕隱藏掉
 46                                 breakpoint:false  //不明白什麼做用，可是若是是true或去掉不寫，popup將不固定
 47                             }
 48                         }
 49                     });
 50 
 51                     var featureLayer=new FeatureLayer({
 52                         url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
 53                         outFields:["*"],
 54                         popupTemplate:{
 55                             //在popupTemplate中可使用HTML標籤，以達到更好的表現效果
 56                             title:"<font color='#008000'>Beverly Hillstrees by block",
 57                             content:[{
 58                                 type:"fields",
 59                                 fieldInfos:[{
 60                                     fieldName:"Point_Count",
 61                                     label:"Count of Points",
 62                                     visible:true,
 63                                     format:{
 64                                         digitSeparator:true,
 65                                         places:0
 66                                     }
 67                                 },{
 68                                     fieldName:"relationships/0/Point_Count_COMMON",
 69                                     label:"Sum of species tree count",
 70                                     statisticType:"sum",  //須要有這一句，否則結果是空（緣由未知）
 71                                     visible:true,
 72                                     format:{
 73                                         digitSeparator:true,
 74                                         places:0
 75                                     }
 76                                 },{
 77                                     fieldName:"relationships/0/COMMON",
 78                                     label:"Common Name",
 79                                     visible:true
 80                                 },{
 81                                     fieldName:"BLOCKCE10",
 82                                     label:"Block",
 83                                     visible:true
 84                                 }]
 85                             },{
 86                                 type:"text",
 87                                 text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
 88                             },{
 89                                 type:"media",
 90                                 mediaInfos:[{
 91                                     title:"Count by type",  //media內容下的標題
 92                                     type:"pie-chart",  //餅圖
 93                                     caption:"one pie-chart",  //圖表的標題
 94                                     value:{
 95                                         theme:"Grasshopper",  //圖表的主題樣式
 96                                         //一系列設置餅圖的參數，涉及到related table的知識
 97                                         fields:["relationships/0/Point_Count_COMMON"],
 98                                         normalizeField:null,
 99                                         tooltipField:"relationships/0/COMMON"
100                                     }
101                                 },{
102                                     title:"Welcome to Beverly Hills",
103                                     type:"image",  //圖片
104                                     value:{
105                                         sourceURL:"https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg" //圖片URL
106                                     }
107                                 }]
108                             }]
109                         }
110                     });
111                     
112                     //將featureLayer添加到map中
113                     map.layers.add(featureLayer);        
114             });
115         </script>
116     </head>
117     
118     <body>
119         <div id="viewDiv"></div>
120     </body>
121 </html>