基于esri-loader的vue中使用arcgis for js

本文介绍的是基于esri-loader让vue中可以方便的按需引入arcgis api，较之前的方式可更好解决代码之间的耦合度与复杂度，让大家都可以写出完美看着顺心的代码。
本文arcgis api以4.x为例

安装依赖

npm i --save esri-loader

引入设置

如果不想使用官方提供的api地址，可以全局设置自己部署的api地址（尤其是内网环境尤其的重要哦）
如果没有特殊要求想换api地址的，可以使用默认的，下面main.js中的内容可以不用设置，但是要记得引入css类。
main.js文件写入:

import { loadScript, loadCss } from 'esri-loader'
// 添加gis的样式和api
loadCss("http://自己的地址/library/4.14/esri/css/main.css");
loadScript({
	dojoConfig: {
	  async: true
	},
	url: 'http://自己的地址/library/4.14/init.js'
});

使用方法

• 可在需要的组件、脚本中引入

import { loadModules } from 'esri-loader'

• 使用示例(下面示例的是加载FeatureLayer):

export function loadFeatureLayer(title, url, visible = true) {
  return loadModules(['esri/layers/FeatureLayer'], { css: true })
    .then(([FeatureLayer]) => {
      return FeatureLayer({
        title: title,
        outFields: ['*'],
        url: url,
        featureReduction: { type: 'selection' },
        visible: visible
      })
    })
}

以上面展示的代码为例，loadModules第一个参数可以跟一个数组，写入要引入类的相对地址，要引入什么类的话，类地址可以在api文档中查看的，然后then跟着的是引入进来类的名称，名称顺序最好与引入顺序对应。

探讨总结

基本的使用如上所示，在项目中使用的话我一般是建立一个mapCore脚本，来管理一个大二级子路由下的map与view状态，因为基本所有的类都是对于map或view状态操作的，这里提供一个地图对象总全局管理，并暴露出一些对地图的操作，查询，图层控制等等，方便各个组件调用，省着层层组件传递map或view对象繁琐。然后当组件销毁时这里也跟着销毁，除了一些公共的初始化参数，不对其他路由下地图对象状态污染。