ArcGIS Server發布完FeatureLayer后，就可以在自己的代碼中調用並在地圖上顯示出來了。
一、代碼框架
調用FeatureLayer，要在require開頭引入"esri/layers/FeatureLayer"模塊。例子使用底圖采用智圖公司提供的切片圖層，更多內容請查看：ArcGIS JavaScript API4.8 底圖選擇的幾種方案。
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>
二、打開ArcGIS Server Manager，查看FeatureLayer的url
點擊FeatureLayer地圖服務的名字，在左側的列表中選擇“功能”，在右側選中“Feature Access”，下方的REST URL就是我們需要調用的url。點擊這個url可以查看這個地圖服務的詳細內容。
三、在代碼中調用
在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中將這個地圖服務的可見性設置為“任何人”，即將服務分享給所有人，以跳過這個登錄面板。
刷新界面，不再要求登錄賬戶和密碼，可以看到發布的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添加到頁面中指定的位置。
例子使用的HTML文件的鏈接分享：https://pan.baidu.com/s/1_LUEWyYE6-_CGOReyQm2eA
因為例子中FeatureLayer的url是本地的，所以在別的電腦上無法訪問，可以自己發布一個FeatureLayer再進行測試。