博客目录
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
的实例,也可以是以下字符串之一:
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实例上的方法来执行只