使用Arcgis Api for Javascript 調用 本地Portal發佈的WebMap

1.環境搭建

　　安裝Arcgis Portal 10.4,Server 10.4,DataStore ,WebAdaptor for IIS,搭建arcgis api for javascript 4.3環境，具體配置過程自行百度，在此就不贅述。

2.語言設置

　　設置Portal語言："個人組織"->編輯設置->常規->語言，選中「中文簡體」;

3.發佈圖層

　　在arcgis pro 1.4中發佈名爲point,line,polygon的測試服務，此處能夠對各圖層進行惟一值渲染等配圖操做,設置圖層彈出框顯示的字段內容、樣式、模板等內容;

　　簡單配置圖層樣式：

　　

　　發佈圖層："Share"選項卡->Share As -> Web Layer -> Publish Web Layer。

　　數據類型分爲「引用註冊數據」和「複製全部數據」，這兩種數據類型支持不一樣的發佈圖層類型以及數據查詢、添加、更新操做。

　　

　　填寫完「概述」、「標籤」後，點擊「分析」按鈕，無錯誤提示後，選擇「發佈」：

　　

4.自定義Web地圖

　　自定義BaseMap

　　在Portal的地圖選項卡中，添加一個自定義BaseMap

　　添加圖層->添加Web圖層，

　　

 

　　選擇Arcgis Web Server,輸入瓦片服務地址，並將「設定爲底圖」勾上）,

　 

　　遇到問題：添加自定義切圖比例尺的瓦片服務，在Portal的Viewer.html能夠看到，但本身寫的頁面去看不相應底圖;

　　解決辦法：瓦片類型選擇ArcGIS Online/BingMaps /Google Maps,不要選擇自定義比例尺。另外，在API4.3版本中，讀取自定義瓦片服務的類變爲TileImageLayer。

　　添加FeatureLayer

　　接着找到point 、line、polygon三個圖層，添加到地圖上，選擇保存按鈕，把配置好的地圖保存。此時能夠在「個人內容」中看到配置的地圖。

　　

　　接下來，保存爲地圖"Fifth"。

　　在地圖查看器中打開"Fifth",內容列表處，可進對Line圖層進行樣式修改、統計、分析、設定標註、自定義彈出框等操做，以設置Line圖層的彈出框樣式爲例：

　　

　　製做完成後，效果以下圖所示：

　　

 

　5.調用地圖

　　使用JS API加載WebMap，須要用到Fifth的GUID編碼，代碼以下　　

 1  var map,webMap,view,tileLyr;
 2         require([
 3             "esri/Map",
 4             "esri/WebMap",
 5             "esri/views/MapView",
 6             "esri/layers/VectorTileLayer",
 7             "dojo/domReady!"
 8         ], function(Map,WebMap, MapView, VectorTileLayer) {
 9 
10             // Create a Map
11             map = new Map();
12             webMap=new WebMap({
13                 portalItem: { // autocasts as new PortalItem()
14                     id: "ea75705fbf3f40639de492578d247fae"
15                 }
16             });
17             // Make map view and bind it to the map
18             view = new MapView({
19                 container: "viewDiv",
20                 map: webMap,
21 
22                 zoom: 10
23             });

View Code

　6.遇到問題：

　　　　一、配置esri/config.js中的PortalUrl後,網頁中的地圖服務地址依然指向www.arcgis.com

　　　　解決辦法：根據官方說明去修改esri/config.js文件中的PortalUrl,可是發現無效;修改init.js中第一個PortalUrl,改成本地Portal地址https://xxx.xxx.com/arcgis便可

　　　　二、https://www.xxx.com/arcgis/sharing/rest/portals/self?f=json&culture=zh-cn  這個地址提示404錯誤，找不到內容，

　　　　解決辦法：將這個地址手工複製到瀏覽器中，若是提示「不安全」，則繼續訪問，直到出內容便可。

　　此時Web頁面應該能加載出地圖了，恭喜！！！

 

　　7.自定義底圖樣式

　　  經過修改root.json，能夠實現不一樣風格的底圖，從而實如今不一樣主題的應用中加載不一樣的風格的地圖。

　　　具體步驟請參照   http://www.giser.net/?p=1522 。須要注意的地方是Vector Tile Layer 要處於根節點。