arcgis api for js在vue中的使用

对于一个没有接触过gis的人，arcgis api for js的上手是有点困难的，自己曾经有很长时间都在使用这个，所以打算把自己在项目中用到的相关技术点记录下来，有需要的朋友可以参考下，希望能够有所帮助，有写的不好的地方，还请在评论留言。 首先安装依赖

npm i esri-loader -D

esri-loader是ESRI官方开源的加载器，使用ES6标准的promise方式进行加载，可以很方便的在es6及以上版本的环境进行使用，使用npm包方式发布

引入第三方库 单独建一个工具jsapi.js文件，内容如下

import * as esriLoader from "esri-loader"

const options = {
    url: 'https://js.arcgis.com/4.24/init.js', // 这里的API地址可以是官网提供的CDN，也可在此配置离线部署的地址
    css: 'https://js.arcgis.com/4.24/esri/themes/light/main.css'
};

export function load(modules) {
    return esriLoader.loadModules(modules, options);
}

在要使用arcgis的地方引入这个文件，例如引入一个三维场景，代码如下，引入文件，加载需要使用到的模块，按照arcgis api for js官方文档进行场景参数的配置，这里填入已经发布好的portal场景id和portal地址新建一个webscene，然后将webscene加入到三维场景的map中，三维地图就会挂载在viewDiv的dom节点上， 这个示例是基于vue2写的，最后可以把地图挂载在vue原型上，可以在代码任何地方取到地图的实例，进行查询分析添加等操作

# arcgis引入三维场景
import * as jsapi from './jsapi'
export async function createSceneView() {
    const [WebScene, SceneView] = await jsapi.load([
        'esri/WebScene',
        'esri/views/SceneView'
    ]);
    const scene = new WebScene({
        portalItem: {
            id: '4cb9affa95be49dba7ca1fc30e021558',
            portal: 'https://portal.ehjedu.cn/arcgis',
        },
    });
    const view = new SceneView({
        container: "viewDiv",
        map: scene,
        ui: {
            components: [],
        },
    });
    Vue.prototype.view = view;

如果是基于vue3写，没有了portotype，目前采用的方法是自己在utils下定义一个文件sceneViewInstnce.js用来模拟vue2的全局变量，代码如下

#sceneViewInstnce.js文件内容
// 将arcgis中的变量赋值给全局变量来一直使用
const SceneViewInstance = {
    _view: {},
    getView() {
        return this._view;
    },
    setView(view) {
        this._view = view;
    },
};

module.exports = SceneViewInstance 

在创建地图的地方引入这个文件，并将生成的view通过上述setView方法设置到全局变量_view上，在要使用view的地方就使用getView方法获取即可,代码如下

import SceneViewInstnce from "@/utils/sceneViewInstnce";

async loadMap() {
      const [WebMap, MapView, Graphic, GraphicsLayer] = await load([
        "esri/WebMap",
        "esri/views/MapView",
      ]);
      const map = new WebMap({
        portalItem: {
          id: "669606addc224104a3da163cdf5a613f",
          portal: "https://portal.ehjedu.cn/arcgis"
        }
      });

      const view = new MapView({
        container: "GisView",
        map: map,
        ui: {
          padding: { left: 82, top: 70 },
          components: []
        }
      });
      SceneViewInstnce.setView(view);

最后，可能有的童鞋看到arcgis api创建地图的代码示例如下

 require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "topo-3d",
          ground: "world-elevation"
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map,
          camera: {
            position: {
              spatialReference: {
                latestWkid: 3857,
                wkid: 102100
              },
              x: -11262192.883555487,
              y: 2315246.351026253,
              z: 18161244.728082635
            },
            heading: 0,
            tilt: 0.49
          }
        });

和我们上面使用的代码不太一样，这是因为esri-loader提供的loadModules方法对require函数进行了封装，返回成现在大家熟悉的promise形式