ArcGis API for js在vue.js中的使用示例详解
作者：无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的资料请关注脚本之家其它相关文章！