ArcGis API for js在vue.js中的使用示例详解
更新时间：2023年08月22日 15:22:40 作者：无is
这篇文章主要为大家介绍了ArcGis API for js在vue.js中的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
写在前面
最近换了一份工作，公司做的是gis相关的服务，之前完全没有接触过gis，光是把地图展现到页面上就费了好些功夫。所以打算把自己在项目中用到的相关技术点记录下来，供自己日后翻看。有写的不好的地方，还请在评论留言。
在vue中安装ArcGis
在vue中使用arcgis需要一个叫做esri-loader的东西来帮我们加载arcgis文件。
- 首先是npm安装
npm install esri-loader -S
npm上的相关文档参考：https://www.npmjs.com/package/esri-loader
- 安装完之后import一下
import esriLoader from 'esri-loader'
样式文件可以在main.js中引入，也可以在当前组件引入，我选择的是在main.js中引
import '../public/src/assets/js/4.10/esri/themes/light/main.css'//这里用相对路径就可以了
使用
最后加载就可以使用arcgis的api了，部分代码如下
const options = {
url: "/src/assets/js/4.10/init.js"//这里千万小心，要用绝对路径，这是托管在本地服务器上的地址
}
esriLoader
//按需加载模块
.loadModules([
"esri/Map",
"esri/views/MapView",//2d视图模块
"esri/views/SceneView",//3d视图模块
],options)
.then(([
Map,
MapView,
SceneView
])=>{
console.log(Map)
})
如果控制台可以打印出Map对象，那么说明我们已经在vue中成功加载arcgis了
以上就是ArcGis API for js在vue.js中的使用示例详解的详细内容，更多关于vue.js ArcGis API的资料请关注脚本之家其它相关文章！
相关文章
Vue3+echarts5踩坑以及resize方法报错的解决
这篇文章主要介绍了Vue3+echarts5踩坑以及resize方法报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了Vue 修改网站图标的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue2.0实现检测无用的代码并删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要为大家介绍了vue实现At人文本输入框示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
v-for是Vue.js中用于循环渲染元素的指令,非常强大但也需要遵循一些最佳实践,下面这篇文章主要介绍了Vue列表渲染v-for用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-03-03
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
这篇文章主要介绍了webpack + vue 打包生成公共配置文件（域名） 方便动态修改,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue+echarts定时重新绘制以达到刷新的动效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
今天小编就为大家分享一篇浅谈vue引用静态资源需要注意的事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue+echarts实现3D柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论