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本地部署
本地部署可以查看【ArcGIS for JS】 API 部署到本地Tomcat(1)
当然，除了本地部署的方式，我们也可以使用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的实例，也可以是官方(https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#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);});下面是完整代码：
<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 //不启用大气可视化}下面是三维地图的完整代码：
<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>Leaflet入门系列
leaflet 入门系列 hello world
Leaflet入门系列 图层管理控件
Leaflet入门系列 比例尺控件Scale
Leaflet入门系列 Zoom控件
Leaflet入门系列 属性控件
Leaflet入门系列 图标(marker) 样式和事件处理
LeafLet入门系列 图标(marker)属性配置
Leaflet入门系列 popup
LeafLet入门系列 常用插件
LeafLet入门系统 加载wkt文件
LeafLet入门系列 GeoJSON图层
LeafLet入门系列 加载矢量切片
LeafLet入门系列 借助 turfjs 绘制点线面缓冲区
LeafLet入门系列 leaflet 常用插件
LeafLet入门系列 调用百度瓦片地图服务
END
请：右下点在看
，右上点【···】分享
关注我
发现更多精彩
808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
