ArcGIS API for JavaScript 4.9学习笔记一（创建2D/3D地图）

2D：

代码：


<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 maptitle>
<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/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>
head>
<body>
  <div id="viewDiv">div>
body>
html>

代码解读：

引入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：

代码:


<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 maptitle>
<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定义比例尺。