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了