写在前面
最近换了一份工作,公司做的是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了