在地圖中調用顯示FeatureLayer並進行render、popupTemplate、添加圖例等相關內容的設置

時間 2019-11-20

標籤地圖調用顯示 featurelayer 並進 render popuptemplate 添加圖例相關內容設置简体版

原文原文鏈接

ArcGIS Server發佈完FeatureLayer後，就能夠在本身的代碼中調用並在地圖上顯示出來了。javascript

1、代碼框架css

　　調用FeatureLayer，要在require開頭引入"esri/layers/FeatureLayer"模塊。例子使用底圖採用智圖公司提供的切片圖層，更多內容請查看：ArcGIS JavaScript API4.8 底圖選擇的幾種方案。html

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <!-- 移動端優化 -->
 5     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 6     <title>在地圖中顯示FeatureLayer</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     <!-- 設置樣式 -->
13     <style>
14         html,body,#viewDiv{
15             margin:0;
16             padding:0;
17             height:100%;
18             width:100%;
19         }
20     </style>
21     
22     <!-- JS API 調用代碼 -->
23     <script>
24         require([
25             "esri/Map",
26             "esri/views/MapView",
27             "esri/layers/TileLayer",
28             "esri/layers/FeatureLayer",
29             
30             "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer){
31                 var mapTileLayer=new TileLayer({
32                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
33                 });
34                 var map=new Map({
35                     layers:[mapTileLayer]
36                 });
37                 
38                 var view=new MapView({
39                     container:"viewDiv",
40                     map:map,
41                     center:[118.79647, 32.05838],  //南京城區
42                     zoom:10
43                 });
44         });
45     </script>
46 </head>
47 
48 <body>
49     <div id="viewDiv"></div>
50 </body>
51 </html>

2、打開ArcGIS Server Manager，查看FeatureLayer的url前端

　　點擊FeatureLayer地圖服務的名字，在左側的列表中選擇「功能」，在右側選中「Feature Access」，下方的REST URL就是咱們須要調用的url。點擊這個url能夠查看這個地圖服務的詳細內容。java

3、在代碼中調用數組

　　在FeatureLayer的構造函數中，將剛纔看到的url的值賦給url屬性；將新建的FeatureLayer（要素圖層）添加到當前Map對象中。框架

 1     <!-- JS API 調用代碼 -->
 2     <script>
 3         require([
 4             "esri/Map",
 5             "esri/views/MapView",
 6             "esri/layers/TileLayer",
 7             "esri/layers/FeatureLayer",
 8             
 9             "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer){
10                 var mapTileLayer=new TileLayer({
11                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
12                 });
13                 var map=new Map({
14                     layers:[mapTileLayer]
15                 });
16                 
17                 var view=new MapView({
18                     container:"viewDiv",
19                     map:map,
20                     center:[118.79647, 32.05838],  //南京城區
21                     zoom:10
22                 });
23                 
24                 //建立FeatureLayer
25                 var featureLayer=new FeatureLayer({
26  url:"https://localhost:6443/arcgis/rest/services/test/南京景點測試/FeatureServer"
27                 });
28                 map.layers.add(featureLayer);
29         });
30     </script>

　　這裏會提示輸入帳戶和密碼，我不知道這是否是因爲將ArcGIS Server託管到portal上致使的。這裏輸入portal的帳戶和密碼後，顯示沒法驗證身份。能夠在ArcGIS Server Manager中將這個地圖服務的可見性設置爲「任何人」，即將服務分享給全部人，以跳過這個登陸面板。
dom

　　刷新界面，再也不要求登陸帳戶和密碼，能夠看到發佈的FeatureLayer已添加到地圖中。ArcGIS Server有時候由於某些緣由沒法啓動，因此有時候發佈的服務沒法調用（Server時好時壞！）。能夠重啓電腦進行嘗試。能夠打開任務管理器，查看Server的啓動狀況。此外，若是將Server託管到portal，則要首先確保portal是能夠正常啓動並訪問的。若是Server用不了，要先檢查是否是portal出了問題。函數

　　地圖中顯示的五光十色的點就是咱們在ArcMap中發佈的FeatureLayer（要素圖層），符號的繪製是在ArcMap中完成的，更多內容請查看：在ArcMap中發佈FeatureLayer（要素圖層）。這樣的符號其實並很差看，咱們能夠使用ArcGIS JavaScript API在前端進行符號的再一次渲染。測試

 1     <!-- JS API 調用代碼 -->
 2     <script>
 3         require([
 4             "esri/Map",
 5             "esri/views/MapView",
 6             "esri/layers/TileLayer",
 7             "esri/layers/FeatureLayer",
 8             
 9             "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer){
10                 var mapTileLayer=new TileLayer({
11                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
12                 });
13                 var map=new Map({
14                     layers:[mapTileLayer]
15                 });
16                 
17                 var view=new MapView({
18                     container:"viewDiv",
19                     map:map,
20                     center:[118.79647, 32.05838],  //南京城區
21                     zoom:10
22                 });
23                 
24                 //建立FeatureLayer
25                 var featureLayer=new FeatureLayer({
26                     url:"https://localhost:6443/arcgis/rest/services/test/南京景點測試/FeatureServer",
27  renderer:{  //符號渲染器
28  type:"unique-value",
29  field:"類別",
30  uniqueValueInfos:[{ 31                             value:"歷史古蹟",
32                             symbol:{
33                                 type:"simple-marker",
34                                 color:[115,0,0,0.8],  //棕色
35                                 size:8
36                             },
37                             label:"歷史古蹟"
38  },{ 39                             value:"銘記緬懷",
40                             symbol:{
41                                 type:"simple-marker",
42                                 color:[36,36,36,0.8],  //黑色（一點灰）
43                                 size:8
44                             },
45                             label:"銘記緬懷"
46  },{ 47                             value:"科教知識",
48                             symbol:{
49                                 type:"simple-marker",
50                                 color:[230,0,0,0.8],  //紅色
51                                 size:8
52                             },
53                             label:"科教知識"
54  },{ 55                             value:"生活玩樂",
56                             symbol:{
57                                 type:"simple-marker",
58                                 color:[230,0,169,0.8],  //紫色
59                                 size:8
60                             },
61                             label:"生活玩樂"
62  },{ 63                             value:"縱情山水",
64                             symbol:{
65                                 type:"simple-marker",
66                                 color:[0,169,230,0.8],  //藍色
67                                 size:8
68                             },
69                             label:"縱情山水"
70  },{ 71                             value:"公園百態",
72                             symbol:{
73                                 type:"simple-marker",
74                                 color:[76,230,0,0.8],  //綠色
75                                 size:8
76                             },
77                             label:"公園百態"
78  }] 79                     }  //符號渲染器結束
80                 });
81                 map.layers.add(featureLayer);
82         });
83     </script>

　　在FeatureLayer的構造函數中爲render（渲染器）屬性賦值。type:"unique-value"規定渲染器按照惟一值進行符號繪製，field:"類別"規定符號繪製依據的字段（將按照FeatureLayer的"類別"這一字段值進行惟一值渲染；這個字段一共有6個值：歷史古蹟、銘記緬懷、科教知識、生活玩樂、縱情山水、公園百態），uniqueValueInfos是一個對象數組，uniqueValueInfos:[{obj1},{obj2},...,{obj6}]，其中每個obj都是一種類別的符號。如{ value:"公園百態",symbol:{ type:"simple-marker",color:[76,230,0,0.8],size:8 },label:"公園百態" }中，value指定爲FeatureLayer中「類別」字段的哪個值（即爲哪個種類）設置接下來的symbol符號；symbol規定這一種類將按照何種方式（顏色、大小等）進行繪製，其中simple-marker表示用簡單的點元素繪製，color和size分別設置顏色和大小；label設定FeatureLayer中要素的每個種類在圖例中顯示的名稱，若是不設置label的值，將按照value的值進行顯示。咱們在後面將添加一個圖例控件。關於符號的更多信息，請查看ESRI提供的Symbol playground：https://developers.arcgis.com/javascript/latest/sample-code/playground/live/index.html。

　　FeatureLayer的一個很重要的特性就是，點擊FeatureLayer中的要素能夠彈出popup（彈出框）顯示該要素的相關內容。如今在地圖中點擊要素是不會彈出popup的，須要設置。

 1     <!-- JS API 調用代碼 -->
 2     <script>
 3         require([
 4             "esri/Map",
 5             "esri/views/MapView",
 6             "esri/layers/TileLayer",
 7             "esri/layers/FeatureLayer",
 8             
 9             "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer){
10                 var mapTileLayer=new TileLayer({
11                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
12                 });
13                 var map=new Map({
14                     layers:[mapTileLayer]
15                 });
16                 
17                 var view=new MapView({
18                     container:"viewDiv",
19                     map:map,
20                     center:[118.79647, 32.05838],  //南京城區
21                     zoom:10
22                 });
23                 
24                 //建立FeatureLayer
25                 var featureLayer=new FeatureLayer({
26                     url:"https://localhost:6443/arcgis/rest/services/test/南京景點測試/FeatureServer",
27                     renderer:{  //符號渲染器
28                         type:"unique-value",
29                         field:"類別",
30                         uniqueValueInfos:[{
31                             value:"歷史古蹟",
32                             symbol:{
33                                 type:"simple-marker",
34                                 color:[115,0,0,0.8],  //棕色
35                                 size:8
36                             },
37                             label:"歷史古蹟"
38                         },{
39                             value:"銘記緬懷",
40                             symbol:{
41                                 type:"simple-marker",
42                                 color:[36,36,36,0.8],  //黑色（一點灰）
43                                 size:8
44                             },
45                             label:"銘記緬懷"
46                         },{
47                             value:"科教知識",
48                             symbol:{
49                                 type:"simple-marker",
50                                 color:[230,0,0,0.8],  //紅色
51                                 size:8
52                             },
53                             label:"科教知識"
54                         },{
55                             value:"生活玩樂",
56                             symbol:{
57                                 type:"simple-marker",
58                                 color:[230,0,169,0.8],  //紫色
59                                 size:8
60                             },
61                             label:"生活玩樂"
62                         },{
63                             value:"縱情山水",
64                             symbol:{
65                                 type:"simple-marker",
66                                 color:[0,169,230,0.8],  //藍色
67                                 size:8
68                             },
69                             label:"縱情山水"
70                         },{
71                             value:"公園百態",
72                             symbol:{
73                                 type:"simple-marker",
74                                 color:[76,230,0,0.8],  //綠色
75                                 size:8
76                             },
77                             label:"公園百態"
78                         }]
79                     },  //符號渲染器結束
80  popupTemplate:{  //設置popup彈出框
81                         title:"<strong>{景點名}</strong>",  //HTML標籤在title和下面的content中都是可用的
82                         content:[{    //以文本方式顯示字段值，type能夠是：text、fields、media、attachment
83                             type:"text",  //花括號中寫上FeatureLayer的字段名字便可顯示出當前要素的這個字段的值
84                             text:"地址：{地址}<br>"+"開放時間：{開放時}<br>"+"票價：{票價}<br>"+
85                                 "<hr>"+
86                                 "所屬風景區：{所屬風}<br>"+"星級：{星級}<br>"+"類別：{類別}<br>"+"網址：{網址}"
87                         }]
88                     }  //popupTemplate結束
89                 });
90                 map.layers.add(featureLayer);
91         });
92     </script>

　　在FeatureLayer的構造函數中，爲popupTemplate屬性賦值。title是popup彈出框的標題，content是顯示的主體內容。content中能夠有4種顯示方式：text、fields、media、attachment。在字符串中，能夠使用HTML的標籤來對文字進行設定（加粗、改變顏色等）。花括號中寫上字段的名字將顯示當前要素的這個字段的值。（由於當時發佈服務所用的shapefile是從excel導過去的，因此字段名發生了截斷；上面，「景點名」實際上是「景點名稱」，「開放時」是「開放時間」，「所屬風」是「所屬風景區」...）。關於popupTemplate的更多內容，請查看：[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中屬性字段值的多種表現形式。

下面爲FeatureLayer添加一個圖例控件，以顯示FeatureLayer要素圖層中各種別要素的符號。

  1     <!-- JS API 調用代碼 -->
  2     <script>
  3         require([
  4             "esri/Map",
  5             "esri/views/MapView",
  6             "esri/layers/TileLayer",
  7             "esri/layers/FeatureLayer",
  8             
  9             "esri/widgets/Legend",
 10             
 11             "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer,Legend){
 12                 var mapTileLayer=new TileLayer({
 13                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
 14                 });
 15                 var map=new Map({
 16                     layers:[mapTileLayer]
 17                 });
 18                 
 19                 var view=new MapView({
 20                     container:"viewDiv",
 21                     map:map,
 22                     center:[118.79647, 32.05838],  //南京城區
 23                     zoom:10
 24                 });
 25                 
 26                 //建立FeatureLayer
 27                 var featureLayer=new FeatureLayer({
 28                     url:"https://localhost:6443/arcgis/rest/services/test/南京景點測試/FeatureServer",
 29                     renderer:{  //符號渲染器
 30                         type:"unique-value",
 31                         field:"類別",
 32                         uniqueValueInfos:[{
 33                             value:"歷史古蹟",
 34                             symbol:{
 35                                 type:"simple-marker",
 36                                 color:[115,0,0,0.8],  //棕色
 37                                 size:8
 38                             },
 39                             label:"歷史古蹟"
 40                         },{
 41                             value:"銘記緬懷",
 42                             symbol:{
 43                                 type:"simple-marker",
 44                                 color:[36,36,36,0.8],  //黑色（一點灰）
 45                                 size:8
 46                             },
 47                             label:"銘記緬懷"
 48                         },{
 49                             value:"科教知識",
 50                             symbol:{
 51                                 type:"simple-marker",
 52                                 color:[230,0,0,0.8],  //紅色
 53                                 size:8
 54                             },
 55                             label:"科教知識"
 56                         },{
 57                             value:"生活玩樂",
 58                             symbol:{
 59                                 type:"simple-marker",
 60                                 color:[230,0,169,0.8],  //紫色
 61                                 size:8
 62                             },
 63                             label:"生活玩樂"
 64                         },{
 65                             value:"縱情山水",
 66                             symbol:{
 67                                 type:"simple-marker",
 68                                 color:[0,169,230,0.8],  //藍色
 69                                 size:8
 70                             },
 71                             label:"縱情山水"
 72                         },{
 73                             value:"公園百態",
 74                             symbol:{
 75                                 type:"simple-marker",
 76                                 color:[76,230,0,0.8],  //綠色
 77                                 size:8
 78                             },
 79                             label:"公園百態"
 80                         }]
 81                     },  //符號渲染器結束
 82                     popupTemplate:{  //設置popup彈出框
 83                         title:"<strong>{景點名}</strong>",  //HTML元素在title和下面的content中都是可用的
 84                         content:[{    //以文本方式顯示字段值，type能夠是：text、fields、media、attachment
 85                             type:"text",  //花括號中寫上FeatureLayer的字段名字便可顯示出當前要素的這個字段的值
 86                             text:"地址：{地址}<br>"+"開放時間：{開放時}<br>"+"票價：{票價}<br>"+
 87                                 "<hr>"+
 88                                 "所屬風景區：{所屬風}<br>"+"星級：{星級}<br>"+"類別：{類別}<br>"+"網址：{網址}"
 89                         }]
 90                     }  //popupTemplate結束
 91                 });
 92                 map.layers.add(featureLayer);
 93                 
 94                 //添加圖例控件
 95                 var legend=new  Legend({  //景點圖例
 96                     view:view,
 97                     layerInfos:[{
 98                         layer:featureLayer,
 99                         title:"南京景點",
100                         style:"classic"  //有兩個值，classic和card，可是card沒反應？
101                     }]
102                 });
103  view.ui.add(legend,"bottom-left");
104         });
105     </script>

　　要在require開頭引入"esri/widgets/Legend"模塊。view設置爲哪個視圖添加圖例，layerInfos中，layer是圖例的指向圖層，title是圖例的標題，style是圖例顯示的方式，它有兩個值，一個是"classic"，一個是"card"，可是"card"設置後與"classic"相比並無變化（沒有解決）。最後view.ui.add()將圖例legend添加到頁面中指定的位置。