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

代码:

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

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

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

2D：

3D：

猜你喜欢