ArcGIS JavaScript API4.8 底圖選擇的幾種方案

時間 2019-11-20

標籤 arcgis javascript api4.8 api 選擇幾種方案欄目 JavaScript 简体版

原文原文鏈接

　　建立一個HTML頁面，引入ArcGIS JavaScript API，在<body>標籤內建立一個div並添加ID值，在<head>標籤內設置樣式<style>，在<head>標籤內編寫JS API代碼腳本<script>。在這個<script>中，全部代碼都是寫在require()中的。關於引用JS API及如何在HTML頁面中使用的基本信息、Map和MapView的基本概念，請查看：[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView簡介。
css

　　底圖的選擇有幾種方案，這裏列出3種：html

　　①在Map對象的構造函數中，爲basemap屬性添加表示底圖的字符串框架

　　②在WebMap對象的構造函數中，爲portalItem屬性添加portal或ArcGIS Online中的WebMap的ID值dom

　　③使用url建立切片圖層（TileLayer），添加至Map對象中函數

1、代碼框架優化

 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>ArcGIS JavaScript API4.8 底圖選擇的幾種方案</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 
25     </script>
26 </head>
27 
28 <body>
29      <div id="viewDiv"></div>
30 </body>
31 </html>

2、添加底圖網站

①在Map對象的構造函數中，爲basemap屬性添加表示底圖的字符串ui

 1     <!-- JS API 調用代碼 -->
 2     <script>
 3         require([
 4             "esri/Map",
 5             "esri/views/MapView",
 6             
 7             "dojo/domReady!"
 8             ],function(Map,MapView){
 9                 //建立地圖Map
10                 var map=new Map({
11                     basemap:"streets"
12                 });
13                 //建立視圖View
14                 var view=new MapView({
15                     container:"viewDiv",
16                     map:map,
17                     center:[118.79647, 32.05838],  //南京城區
18                     zoom:10
19                 });
20             }
21         );
22     </script>

　　basemap還能夠有其餘的值，能夠進行嘗試。加密

②在WebMap對象的構造函數中，爲portalItem屬性添加portal或ArcGIS Online中的WebMap的ID值url

　　打開portal或ArcGIS Online，找到喜歡的底圖，點擊查看，進入地圖查看器，在上方的url地址欄上會顯示一個ID值，複製這個ID值，後面會用到。

　　1°portal：打開portal，圖庫-Esri專題內容，在左側列表中選擇「底圖」，在右側的頁面中點擊查看感興趣的底圖。

　　進入地圖查看器，上方的url地址欄中最後顯示的一串數字，就是咱們須要的WebMap的ID值。

 1     <!-- JS API 調用代碼 -->
 2     <script>
 3         require([
 4             "esri/WebMap",
 5             "esri/views/MapView",
 6             
 7             "dojo/domReady!"
 8             ],function(WebMap,MapView){
 9                 //建立地圖Map
10                 var map=new WebMap({
11  portalItem:{
12                         id:"00f90f3f3c9141e4bea329679b257142"
13                     }        
14                 });
15                 //建立視圖View
16                 var view=new MapView({
17                     container:"viewDiv",
18                     map:map,
19                     center:[118.79647, 32.05838],  //南京城區
20                     zoom:10
21                 });
22             }
23         );
24     </script>

　　注意使用WebMap的ID建立地圖時，在require()開頭要引入WebMap模塊而不是Map模塊。

　　2°ArcGIS Online：打開ArcGIS Online，在主頁下方的圖庫中選擇感興趣的底圖，點擊進入地圖查看器，上方url地址欄中最後一串數字就是咱們須要的ID值。一樣地，代碼與調用portal的ID值相同。

 1     <!-- JS API 調用代碼 -->
 2     <script>
 3         require([
 4             "esri/WebMap",
 5             "esri/views/MapView",
 6             
 7             "dojo/domReady!"
 8             ],function(WebMap,MapView){
 9                 //建立地圖Map
10                 var map=new WebMap({
11  portalItem:{
12                         //id:"00f90f3f3c9141e4bea329679b257142"  //portal
13                         id:"bf024b8d0b4b48f5a486070214e87c5f"  //ArcGIS Online
14                     }        
15                 });
16                 //建立視圖View
17                 var view=new MapView({
18                     container:"viewDiv",
19                     map:map,
20                     center:[118.79647, 32.05838],  //南京城區
21                     zoom:10
22                 });
23             }
24         );
25     </script>

　　這裏要注意，引用Esri提供的portal或ArcGIS Online底圖ID是不會有問題的，但若是是咱們本身用ArcGIS Pro發佈的WebMap，引用它的ID值會出現沒法調用的錯誤。多是由於咱們要在代碼中寫上portal或ArcGIS Online的帳戶和密碼。（沒有解決）

③使用url建立切片圖層（TileLayer），添加至Map對象中

　　上面兩種方法都是直接使用的Map或者WebMap，咱們也能夠建立切片圖層，再將圖層添加到空Map中，以達到底圖的效果。http://www.geoq.cn/site/basemap.html。這個網站提供了一些切片圖層的url，複製後寫入TileLayer的構造函數中便可。點擊查看「服務地址」，上方地址欄中的url便是咱們須要引用的切片圖層的url。

 1     <!-- JS API 調用代碼 -->
 2     <script>
 3         require([
 4             "esri/Map",
 5             "esri/views/MapView",
 6             "esri/layers/TileLayer",
 7             
 8             "dojo/domReady!"
 9             ],function(Map,MapView,TileLayer){
10                 //底圖使用的切片圖層
11                 var mapTileLayer=new TileLayer({
12                     url:"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer"
13                 });
14                 //建立地圖Map
15                 var map=new Map({
16  layers:[mapTileLayer]
17                 });
18                 //建立視圖View
19                 var view=new MapView({
20                     container:"viewDiv",
21                     map:map,
22                     center:[118.79647, 32.05838],  //南京城區
23                     zoom:10
24                 });
25             }
26         );
27     </script>

　　除了將切片圖層賦值給Map構造函數中的layers屬性，也能夠在建立完空Map對象後，這樣寫：map.layers.add("切片圖層名")。

3、總結

　　三種方法均可以添加合適的底圖，若是Esri提供的basemap底圖字符串沒有適合的，能夠去portal或者ArcGIS Online的圖庫中找找。若是仍是不符合需求，能夠去智圖等一些網站上找找提供的service（服務）的url。這裏要注意，前兩種方法的底圖都是WGS84座標系的，而第三種方法的切片圖層是火星座標系的。

　　互聯網地圖使用三種座標系統（這裏的座標系統指加密座標系統，不是指地理座標系或投影座標系）：WGS84座標系、火星座標系、百度座標系。國外一些地圖使用WGS84座標系，火星座標系是國家測繪局要求的對WGS84座標系的加密，而百度座標系是百度公司對火星座標系的又一次加密。

文中例子的連接分享：https://pan.baidu.com/s/1ylxc_XanvQKdHMcmWt7Zyw

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。