今天分享利用arcgis的api,在vue中创建地图实例,并且在地图上显示出来。
- 先是引入arcgis
这个具体可以参考上一篇文章:ArcGis API for js 在vue.js中的使用 - 创建map实例
这个Map类就是用于存储,管理和覆盖2D和3D查看共有的图层的属性和方法。
var map = new Map({
basemap:'streets' //配置底图类型
})
- 地图创建好后,还需要一个视图去引用地图,这样才能在网页中显示出来。
//创建2d视图
var view = new MapView({
container:'viewDiv',//html结构,要用id来声明
map:map,//引用的地图实例
zoom: 4,//表示视图当前的缩放级别,通常和center一起使用,设置视图的初始值
center: [15, 65]//设置显示的地图中心位置
})
创建3d视图也是大同小异
var view = new SceneView({
container: "viewMap",
map: map,
center:[113.54,22.36],
zoom:4,
extent:{//配置初始地图范围
xmin: 113.53778263250001,
ymin: 22.361690773984428,
xmax: 113.56382441750009,
ymax: 22.377545955584687,
spatialReference: 4326//配置坐标系
},
});
-
最后运行项目,就可以看到地图已经成功在网页中展示了。
具体配置文档可以参考arcgis官网的API