[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView簡介

時間 2019-11-20

標籤 arcgis api javascript 4.8 sample code started mapview sceneview 簡介欄目 JavaScript 简体版

原文原文鏈接

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

1、Intro to MapView(2D)css

在本身的HTML界面中建立並顯示一個2D地圖。html

1.引入ArcGIS API for JavaScriptjava

①編寫HTML骨架ios

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <!-- 移動端優化 -->
 6         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 7         <title>Intro to MapView - Create a 2D map</title>
 8     </head>
 9     
10     <body>
11     </body>
12 </html>

②在<head>標籤中，使用<script>和<link>標籤引入JS APIapi

1 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
2 <script src="https://js.arcgis.com/4.8/"></script>

注：部署JS API有兩種方式，本地部署或者在線引用。上面的例子是使用在線的API，當API版本更新或者想使用其餘版本的API時，只須要更改其中的4.x數字。若是在線API加載緩慢，請刷新或者耐心等候。數組

2.導入模塊(modules)框架

從API中導入所須要的模塊。dom

1 <script>
2     require([
3         "esri/Map",
4         "esri/views/MapView",
5         "dojo/domReady!"
6         ],function(Map,MapView){
7             // 要編寫的代碼
8     });
9 </script>

這裏的<script>標籤仍是寫在<head>標籤裏，也能夠寫在外部的.js文件裏，在<script>中引入。ide

Esri的JavaScript API是創建在Dojo框架之上的，require()是Dojo中的一個方法，用於導入模塊。這裏"esri/Map"，"esri/views/MapView"，"dojo/domReady!"就是3個不一樣的模塊，至關於C語言中的#include<stdio.h>，C++中的#include<iostream>,C#中的using System。有了這些模塊，才能使用其中的類。

這裏，"esri/Map"是關於建立地圖的模塊，"esri/views/MapView"是關於以2D方式顯示地圖的模塊，"dojo/domReady!"確保在執行代碼前DOM是準備好的。關於dojo的相關信息，請參考https://developers.arcgis.com/javascript/3/jshelp/inside_dojo.html，https://developers.arcgis.com/javascript/3/jshelp/why_dojo.html。

這段代碼的寫法很奇怪，全部的代碼都是寫在require()中的。在這裏，有兩個參數。第一個是須要導入的模塊數組，["module1","module2","module3",...,"module n"]。第二個參數是代碼的關鍵部分，是一個匿名函數。須要實現的業務功能都要寫在這個匿名函數的函數體中。函數須要參數，參數是下文中須要用到的類(class)，而使用這些類的前提是在前面已經導入了相應的模塊。function(class1,class2,...,class n){ //to do }。

要習慣這種奇怪的寫法，注意括號的匹配。

3.建立地圖

這裏須要先知道兩個很重要的概念，Map和View。前面導入的兩個模塊"esri/Map"和"esri/views/MapView"就是爲了提供這兩個類的。

Map建立地圖的內容，它決定要建立什麼樣的地圖，顯示什麼內容。View是顯示地圖的窗口，Map只是建立了地圖，有這個東西，可是若是要在HTML頁面中顯示，仍是要經過View。舉個例子，若是畫一幅畫，我知道要畫些什麼，就是我知道Map是什麼。可是畫在哪裏，是紙上、竹子上、黑板上仍是哪裏，就是View決定的。

 1 <script>
 2     require([
 3         "esri/Map",
 4         "esri/views/MapView",
 5         "dojo/domReady!"
 6         ],function(Map,MapView){
 7               var map=new Map({
 8                   basemap:"streets"
 9        });
10    });
11</script>

這裏，var map=new Map()建立一個Map對象。在構造函數中傳入相關參數以設置Map實例的屬性。這些參數要放在大括號{}中。這種構造函數的寫法也很奇怪，要適應。

basemap是Map類的一個屬性，決定了建立什麼樣子的地圖，其餘的選擇還有：satellite,hybrid,topo,gray,dark-gray,oceans,osm,national-geographic。接觸到Layer圖層的知識後，basemap還能夠是本身發佈的地圖服務等等。也能夠是portal、ArcGIS Online裏WebMap的id引用。

關於Map的其餘屬性，請查看參考文檔：https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html。

可使用Esri提供的沙盒(Sandbox)功能在線編輯查看：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-mapview。

4.建立2D視圖(view)

view是顯示地圖的窗口，可是view仍是要寄託在HTML<div>標籤上的，至關於<div>是view的一個載體，要否則view怎麼知道在哪裏顯示呢？

1 <body>
2     <div id="viewDiv"></div>
3</body>

要注意這裏的id，後面會用到。

 1 <script>
 2     require([
 3         "esri/Map",
 4         "esri/views/MapView",
 5         "dojo/domReady!"
 6         ],function(Map,MapView){
 7             // 建立地圖map
 8             var map=new Map({
 9                 basemap:"streets"
10             });
11                     
12             // 建立視圖view
13             var view=new MapView({
14                 container:"viewDiv",  // 對應div載體，viewDiv是其id
15                 map:map,  // 要顯示的地圖,前一個map是屬性名，後一個map是前面建立的地圖實例
16                 center:[117,34],  // 地圖顯示中心
17                 zoom:4  // 縮放級別
18             });
19     });
20</script>

這裏，container和map都是MapView的屬性。"viewDiv"是那個載體的id，map是前面建立的地圖實例。

關於MapView的其餘屬性，請查看MapView的參考文檔：https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html。

5.配置頁面樣式(style)

爲了正確顯示，設置頁面css。

1 <style>
2html,body,#viewDiv{
3         padding:0;
4         margin:0;
5         height:100%;
6         width:100%;
7     }
8</style>

6.最終代碼及運行效果

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <!-- 移動端優化 -->
 6         <meta name="viewport" content="initial-scale=1,maximun-scale=1,user-scalable=no">
 7         <title>Intro to MapView - Create a 2D map</title>
 8         
 9         <!-- JS API的引入 -->
10         <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
11         <script src="https://js.arcgis.com/4.8/"></script>
12         
13         <script>
14             require([
15                 "esri/Map",
16                 "esri/views/MapView",
17                 "dojo/domReady!"
18                 ],function(Map,MapView){
19                     // 建立地圖map
20                     var map=new Map({
21                         basemap:"streets"
22                     });
23                     
24                     // 建立視圖view
25                     var view=new MapView({
26                         container:"viewDiv",  // 對應div載體，viewDiv是其id
27                         map:map,  // 要顯示的地圖,前一個map是屬性名，後一個map是前面建立的地圖實例
28                         center:[117,34],  // 地圖顯示中心
29                         zoom:4  // 縮放級別
30                     });
31             });
32         </script>
33         
34         <style>
35             html,body,#viewDiv{
36                 padding:0;
37                 margin:0;
38                 height:100%;
39                 width:100%;
40             }
41         </style>
42     </head>
43     
44     <body>
45         <div id="viewDiv"></div>
46     </body>
47 </html>

2、Intro to SceneView(3D)

在本身的HTML頁面中建立並顯示一個3D地圖（地球）。

顯示3D地圖與顯示2D地圖相似。

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>Intro to SceneView - Create a 3D map</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         <script>
13             require([
14                 "esri/Map",
15                 "esri/views/SceneView",  // 變更1
16                 "dojo/domReady!"
17                 ],function(Map,SceneView){
18                     // 建立地圖
19                     var map=new Map({
20                     });
21                     
22                     //建立視圖
23                     var view=new SceneView({  // 變更2
24                     });
25             });
26         </script>
27         
28         <style>
29             html,body,#viewDiv{
30                 padding:0;
31                 margin:0;
32                 height:100%;
33                 width:100%;
34             }
35         </style>
36     </head>
37 
38     <body>
39         <div id="viewDiv"></div>
40     </body>
41 </html>

相比較顯示2D地圖，這裏有兩處變更。第一個變更是引入的視圖模塊，2D地圖是"esri/views/MapView",而3D地圖是"esri/views/SceneView"。第二個變更是function()中的類，2D地圖是MapView，而3D地圖是SceneView。也就是說MapView是承載2D地圖的視圖，而SceneView是承載3D地圖的視圖。Scene是場景的意思，即3D地圖。

2.Map和SceneView代碼

須要設置的屬性和2D地圖差很少，但也有不同的地方。

 1 var map=new Map({
 2     basemap:"streets",
 3     ground:"world-elevation"  // 3D地圖須要設置這個屬性
 4 });
 5           
 6 //建立視圖
 7 var view=new SceneView({  // 變更2
 8     container:"viewDiv",
 9     map:map,
10     scale:50000000,  //設置初始比例尺爲 1:50,000,000
11     center:[117,34]
12 });

ground屬性用於設置3D地圖的地面屬性(surface properties)，只在建立3D地圖時設置。這裏設置爲"world-elevation"，設置了一個使用World Elevation Service的地面實例(ground instance)。

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>Intro to SceneView - Create a 3D map</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         <script>
13             require([
14                 "esri/Map",
15                 "esri/views/SceneView",  // 變更1
16                 "dojo/domReady!"
17                 ],function(Map,SceneView){
18                     // 建立地圖
19                     var map=new Map({
20                         basemap:"streets",
21                         ground:"world-elevation"  // 3D地圖須要設置這個屬性
22                     });
23                     
24                     //建立視圖
25                     var view=new SceneView({  // 變更2
26                         container:"viewDiv",
27                         map:map,
28                         scale:50000000,  //設置初始比例尺爲 1:50,000,000
29                         center:[117,34]
30                     });
31             });
32         </script>
33         
34         <style>
35             html,body,#viewDiv{
36                 padding:0;
37                 margin:0;
38                 height:100%;
39                 width:100%;
40             }
41         </style>
42     </head>
43 
44     <body>
45         <div id="viewDiv"></div>
46     </body>
47 </html>

相關標籤/搜索

每日一句

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