ArcGIS API for JavaScript 4.9學習筆記一（建立2D/3D地圖）
阿新 • • 發佈：2018-11-19
ArcGIS API for JavaScript 4.9學習筆記一（建立2D/3D地圖）
2D：
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to MapView - Create a 2D map</title>
<style 程式碼解讀：
-
引入CDN上託管的檔案：
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script> -
require函式
require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView){ var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", // Reference to the scene div created in step 5 map: map, // Reference to the map object created before the scene zoom: 4, // Sets zoom level based on level of detail (LOD) center: [15, 65] // Sets center point of view using longitude,latitude }); }); </script>1.require入口函式的第一個引數是一個數組，與Java中的#import類似，是對第二個引數所需要的功能進行引用，第二個引數是一個函式，注意前後載入的功能一定要一致，如載入的第一個引數是“esri Map",那麼，回撥函式中第一個引數必須是“Map”。
2.Map中有basemap屬性，可供選擇地圖樣式
ESRI提供的底圖樣式有：streets ,satellite ,hybrid, topo, gray,dark-gray, oceans, national-geographic,terrain, osm, dark-gray-vector, gray-vector,streets-vector, streets-night-vector, streets-relief-vector, streets-navigation-vector,topo-vector.terrain, dark-gray, dark-gray-vector, gray-vector, streets-vector,streets-night-vector, streets-relief-vector, streets-navigation-vector , topo-vector等
3.回撥函式的第二個引數中傳入了一個檢視，檢視有兩種型別MapView（用於檢視2D地圖）和SceneView（用於檢視3D地圖）。
- 在MapView中container用於繫結給地圖提供的DIV id，** 不需要寫# **
- map用於繫結上面建立的map模組
- zoom用於設定縮放的級別（3~18）
- center以經緯度來是設定地圖中心
3D：
程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView){
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
scale: 50000000,
center: [-101.17, 21.78]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
與2D不同，3D示例程式碼中回撥函式new了一個SceneView建構函式（這也是在建立2D地圖與3D地圖的最大不同之處），建構函式中的使用scale定義比例尺。