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

頭號碼甲 2020-09-14

展開全文

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

一、Intro to PopupTemplate(關于popup模板)

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

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

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

1.代碼骨架

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <!-- 移動端優(yōu)化 -->
 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./4.8/esri/css/main.css">
11         <script src="https://js./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樣式的設置等等。

2.基礎語句

 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             //創(chuàng)建Map（實例化）
 9             var map=new Map({
10                 basemap:"gray",
11             });
12                     
13             //創(chuàng)建MapView（實例化）
14             var view=new MapView({
15                 container:"viewDiv",
16                 map:map,
17                 center:[-73.950,40.702],
18                 zoom:11
19             });
20                     
21             //創(chuàng)建FeatureLayer（實例化）
22             var featureLayer=new FeatureLayer({
23                 url:"https://services./V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
24                 outFields:["*"]
25             });
26                     
27             //將新創(chuàng)建的FeatureLayer添加到map中
28             map.layers.add(featureLayer);
29 });
30</script>

上面語句創(chuàng)建了地圖(Map)與和視圖(MapView)，并將地圖綁定到了視圖中。創(chuàng)建了一個FeatureLayer(要素圖層)并添加到了Map實例中。關于Map和MapView的概念，請查看：https://www.cnblogs.com/wangmengdx/p/9385033.html。

此時出現(xiàn)了底圖和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;

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

只包括title標題的模板創(chuàng)建完成后，將它賦給featureLayer的popupTemplate屬性。當點擊featureLayer中的要素時，就會按照這個自定義模板的形式彈出popup，展示相關的內(nèi)容。

只有標題的template

4.編寫popupTemplate模板主體內(nèi)容

 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的主體內(nèi)容，它的值是一個對象數(shù)組，按照這種形式：content:[{obj 1},{obj 2},...,{obj n}]。即在popup中可以顯示很多種內(nèi)容（obj 1規(guī)定的、obj 2規(guī)定的內(nèi)容等等）。上面代碼只規(guī)定了一個obj1，它設置了字段值以表格的形式展示（還可以以文本、圖表、圖片等形式展示）。obj1中有兩個屬性，第一個是type（這里是"fields"），用于標識這段內(nèi)容想展示什么樣的數(shù)據(jù)；第二個是fieldInfos（根據(jù)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結(jié)束

上面要展示的4個內(nèi)容(obj1、obj2、obj3、obj4)對應著fields、text、media(圖表或圖片)、attachment這4種展示信息的形式，在后文中會講到。

包含字段值的template

5.格式化顯示數(shù)字數(shù)據(jù)

可以設置千分位符（當數(shù)字大于1000，顯示小數(shù)點，不確定當數(shù)字大于1000000是否會顯示兩個小數(shù)點）、小數(shù)點位以達到更好的顯示效果。

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

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

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

（因為前面要演示popup的效果，已經(jīng)進行了賦值）。將自定義的template(popup模板)賦值給圖層的popupTemplate屬性，就可以用自己定義的popup形式展示所點擊要素的屬性內(nèi)容。

有兩種方法可以實現(xiàn)。一是在featureLayer的構(gòu)造函數(shù)中設置popupTemplate屬性，即在創(chuàng)建featureLayer時將之前已經(jīng)寫好代碼的template賦給popupTemplate；二是調(diào)用代碼將template賦值給圖層的popupTemplate屬性，這適用于在創(chuàng)建圖層時還沒有寫好template的情況。

方法一：

1 var featureLayer=new FeatureLayer({
2     url:"https://services./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         <!-- 移動端優(yōu)化 -->
 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./4.8/esri/css/main.css">
11         <script src="https://js./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                     //創(chuàng)建Map（實例化）
31                     var map=new Map({
32                         basemap:"gray",
33                     });
34                     
35                     //創(chuàng)建MapView（實例化）
36                     var view=new MapView({
37                         container:"viewDiv",
38                         map:map,
39                         center:[-73.950,40.702],
40                         zoom:11
41                     });
42                     
43                     //創(chuàng)建FeatureLayer（實例化）
44                     var featureLayer=new FeatureLayer({
45                         url:"https://services./V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
46                         outFields:["*"]
47                     });
48                     
49                     //將新創(chuàng)建的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  //小數(shù)點保留0位（四舍五入到整數(shù)）
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>

最終代碼

運行效果1

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

除了以表格形式，在popup中還可以通過文本、圖表、圖片或其他與圖層有關的附件（attachment）來表示圖層要素的字段值。這些內(nèi)容在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./4.8/esri/css/main.css">
10         <script src="https://js./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                     //創(chuàng)建地圖（實例化）
30                     var map=new Map({
31                         basemap:"hybrid"
32                     });
33                     
34                     //創(chuàng)建視圖（實例化）
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,  //將切換固定狀態(tài)的那個按鈕隱藏掉
46                                 breakpoint:false  //不明白什么作用，但是如果是true或去掉不寫，popup將不固定
47                             }
48                         }
49                     });
50 
51                     var featureLayer=new FeatureLayer({
52                         url:"https://services./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里面的內(nèi)容比較多，為了更好的表現(xiàn)效果，將popup固定。popup是view的一個屬性，在popup中，將dockEnabled設置為true，并將dockOptions屬性下的兩個屬性buttonEnabled和breakpoint設置為false，即可固定popup。

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

不能彈出popup的運行結(jié)果

2.設置popupTemplate

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

在FeatureLayer的構(gòu)造函數(shù)中添加popupTemplate屬性，并用空括號給它賦值。屬性雖然是空的，但是開啟了圖層要素的popup?，F(xiàn)在再點擊要素，會彈出一個空的popup。

彈出空popup的運行結(jié)果

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

①編寫popupTemplate標題

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

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

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

 1 popupTemplate:{
 2//在popupTemplate中可以使用HTML標簽，以達到更好的表現(xiàn)效果
 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",  //需要有這一句，不然結(jié)果是空（原因未知）
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 結(jié)束
32     }]
33 }

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

字段值運行效果

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

 1 popupTemplate:{
 2//在popupTemplate中可以使用HTML標簽，以達到更好的表現(xiàn)效果
 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",  //需要有這一句，不然結(jié)果是空（原因未知）
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標簽，以達到更好的表現(xiàn)效果
 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",  //需要有這一句，不然結(jié)果是空（原因未知）
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內(nèi)容下的標題
39             type:"pie-chart",  //餅圖
40             caption:"one pie-chart",  //圖表的標題
41             value:{
42                 theme:"Grasshopper",  //圖表的主題樣式
43                 //一系列設置餅圖的參數(shù)，涉及到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./cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg" //圖片URL
53             }
54         }]
55     }]
56 }

對于每一個內(nèi)容來說（字段表格、文本、圖表、圖片）都可以有一個標題。除了這幾種類型外，popup中還可以添加一種attachment類型的內(nèi)容。官方文檔中未給出相應例子。

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./4.8/esri/css/main.css">
 10         <script src="https://js./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                     //創(chuàng)建地圖（實例化）
 30                     var map=new Map({
 31                         basemap:"hybrid"
 32                     });
 33                     
 34                     //創(chuàng)建視圖（實例化）
 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,  //將切換固定狀態(tài)的那個按鈕隱藏掉
 46                                 breakpoint:false  //不明白什么作用，但是如果是true或去掉不寫，popup將不固定
 47                             }
 48                         }
 49                     });
 50 
 51                     var featureLayer=new FeatureLayer({
 52                         url:"https://services./V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
 53                         outFields:["*"],
 54                         popupTemplate:{
 55                             //在popupTemplate中可以使用HTML標簽，以達到更好的表現(xiàn)效果
 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",  //需要有這一句，不然結(jié)果是空（原因未知）
 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內(nèi)容下的標題
 92                                     type:"pie-chart",  //餅圖
 93                                     caption:"one pie-chart",  //圖表的標題
 94                                     value:{
 95                                         theme:"Grasshopper",  //圖表的主題樣式
 96                                         //一系列設置餅圖的參數(shù)，涉及到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./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>