vue使用ArcGis API for js创建地图实现示例
更新时间：2023年08月22日 15:30:06 作者：无is
这篇文章主要为大家介绍了vue使用ArcGis API for js创建地图实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
arcgis api在vue中创建地图实例
今天分享利用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视图
创建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
以上就是vue使用ArcGis API for js创建地图实现示例的详细内容，更多关于vue ArcGis API for js创建地图的资料请关注脚本之家其它相关文章！
相关文章
这篇文章介绍了vue为自定义路径设置别名的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
这篇文章主要介绍了vue使用高德地图实现实时天气预报功能,根据定位功能，使用高德地图实现定位当前城市的天气预报功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue-cli配置打包文件本地使用的教程图解,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了vue+iview实现分页及查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白。这篇文章主要介绍了决微信H5页面软键盘弹起后页面下方留白的问题（iOS端） ,需要的朋友可以参考下2019-06-06
基于Vue3+TypeScript的全局对象的注入和使用详解
这篇文章主要介绍了基于Vue3+TypeScript的全局对象的注入和使用,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用，需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了Vue+ElementUI之Tree的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了深入理解vue-class-component源码阅读，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要为大家详细介绍了vuejs2.0运用原生js实现简单拖拽元素功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家介绍了vue this.$router六种方法使用示例总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论