【一】ArcGIS API for JavaScript 4.x之地图显示

1、ArcGIS API for JavaScript 4简介

当前ArcGIS API for JavaScript 4版本已更新到4.11，4版本最大的特点就是通过引入全新设计的 map 、view对象，开发者可以快速构建一个 二维、三维模式（或者同时渲染）的Web应用程序。操作三维视图与操作二维相类似，两者共用了相同的 Layers、Geometry、Symbol、Navigation、 Renderers、Tasks、Pop-ups等。不同的是，在三维中新增了一部分特有的特性，例如环境environment与光照Lighting，镜头Camera等等。

本篇博客内容主要介绍API 的本地部署以及使用API实现地图显示。

2、API本地部署

本地部署的过程与3版本相同，这里可以参照3版本的部署过程【一】ArcGIS API for JavaScript之API的使用和部署

此外，在测试时会遇到微件图标显示的问题，可以参照ArcGIS API For JavaScript4.x本地部署微件图标显示问题的解决方案

当然，除了本地部署的方式，我们也可以使用ArcGIS托管于CDN的方式来引用：

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

3、二维地图

我们以加载OSM地图为例，下图为青岛市二维地图的显示效果：

• Map
  在实例化Map时，常用到两个属性：basemap和ground
  basemap用来指定地图的底图，即一组切片图层；其属性值可以是Basemap的实例，也可以是官方列出的服务链接。
  
  ground用来指定地图的曲面属性，只有当地图添加到 SceneView时，此属性才有意义。它使用ElevationLayer的集合渲染地图表面上现实世界中的地形或地形变化。
  此值可以是Ground的实例，也可以是以下字符串之一：

1. world-elevation 对于使用Terrain3D服务的默认地面实例
2. world-topobathymetry 对于使用TopoBathy3D服务结合表面高程和水深测量的地面实例

• MapView
  用于渲染二维地图，实例化时需要定义map和container，map为地图对象，container为对应的DOM元素ID
  MapView还处理用户和地图之间的交互：设置比例尺、视图范围等。

//设置比例尺
view.scale = 24000;
//设置地图视图中心位置和缩放级别
view.center = [-112, 38]; 
view.zoom = 13; 
//设置地图初始化显示范围
view.extent = new Extent({
   
  	xmin: -9177882,
  	ymin: 4246761,
  	xmax: -9176720,
  	ymax: 4247967,
 	spatialReference: {
   
    	wkid: 102100
 	}
});

.when() 可以调用MapView实例上的方法来执行只