博客目录
1、ArcGIS API for JavaScript 4简介2、API本地部署3、二维地图4、三维地图ArcGIS API for JavaScript 4版本的开发教程会陆续更新，感兴趣的可以关注丫！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="/4.11/esri/css/main.css"><script src="/4.11/"></script>
3、二维地图
我们以加载OSM地图为例，下图为青岛市二维地图的显示效果：
Map
在实例化Map时，常用到两个属性：basemap和ground
basemap用来指定地图的底图，即一组切片图层；其属性值可以是Basemap的实例，也可以是官方列出的服务链接。
ground用来指定地图的曲面属性，只有当地图添加到SceneView时，此属性才有意义。它使用ElevationLayer的集合渲染地图表面上现实世界中的地形或地形变化。
此值可以是Ground的实例，也可以是以下字符串之一：world-elevation对于使用Terrain3D服务的默认地面实例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实例上的方法来执行只能在加载地图后运行的进程：
view.when(function(){// 所有资源都已加载完成}, function(error){// 为正确加载console.log("The view's resources failed to load: ", error);});
下面是完整代码：
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>二维地图</title><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/4.11/esri/css/main.css"/><style>html,body,#viewDiv{width:100%;height:100%;padding:0;margin:0}</style></head><body><div id="viewDiv"></div><script type="text/javascript" src="http://localhost/arcgis_js_api/library/4.11/init.js"></script><script>require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {var map = new Map({basemap: "osm"});var view = new MapView({container: "viewDiv",map: map,center:[120.36, 36.1],zoom:12});});</script></body></html>
4、三维地图
同样以加载OSM地图为例，下图为青岛市三维地图的显示效果：
SceneView
SceneView 使用WebGL显示Map或WebScene实例的三维视图，实例化时需要定义map和container，map为地图对象，container为对应的DOM元素ID。
此外，Camera属性可以用来指定SceneView的可见部分（或透视图）的观察点，包括当前视图的高程，倾斜tilt和朝向heading（以度为单位）
camera: {position: [-122, // 经度38, // 纬度50000 // 高程（米）],heading: 95,tilt: 65}
environment可以设置显示环境的各种属性，如背景颜色、天空、星星、大气层、光照时间等：
environment: {background: {type: "color",color: [255, 252, 244, 1]},starsEnabled: false, //不启用星星可视化atmosphereEnabled: false //不启用大气可视化}
下面是三维地图的完整代码：
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>三维地图</title><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/4.11/esri/css/main.css"/><style>html,body,#viewDiv{width:100%;height:100%;padding:0;margin:0}</style></head><body><div id="viewDiv"></div><script type="text/javascript" src="http://localhost/arcgis_js_api/library/4.11/init.js"></script><script>require(["esri/Map", "esri/views/SceneView"], function(Map, SceneView) {var map = new Map({basemap: "osm",ground: "world-elevation"});var view = new SceneView({container: "viewDiv",map: map,camera:{//设置镜头参数position: {x: 120.36,y: 35.9,z: 15000},tilt: 50},zoom:9});});</script></body></html>
