Arcgis 4入门篇（创建地图）

       首先，你需要知道arcgis的官网https://developers.arcgis.com/javascript/latest/api-reference/，并且要了解其中的API，每个API是干嘛的。

这一段代码是初始化创建地图的：调用方法

      this.$nextTick(async() => {
        this.map = new ArcgisUtil(this.$refs.aicgisMap)
          this.Map = await this.map.init()
        })

import { loadScript, loadModules } from "esri-loader"
let loadOptionFlag = false
const loadOption = { //地图初始化的js
  url: `lib/arcgis_js_api/library/4.18/dojo/dojo.js` // ArcGIS API
}
const esriMoudles = {
  Map: "esri/Map",
  TileLayer: "esri/layers/TileLayer",
  Basemap: "esri/Basemap",
  MapView: "esri/views/MapView",
  Point: "esri/geometry/Point",
  BasemapToggle: "esri/widgets/BasemapToggle",
  GraphicsLayer: "esri/layers/GraphicsLayer",
  MapPoint: "esri/geometry/Point", 
  Graphic: "esri/Graphic",
  PictureMarkerSymbol: "esri/symbols/PictureMarkerSymbol"
} //这里是按需引入的模块

class ArcgisUtil { //创建一个构造类
  constructor(
    divId, // this.$refs.XXX
    options = {
      center: [120.15507, 30.274084],
      zoom: 15
    }
  ) {
    this.divId = divId
    this.center = options.center
    this.zoom = options.zoom
    this.map = null
  }
  /**
   * 地图初始化
   * @returns { Promise }
   */
  init() {
    return new Promise(async(resolve, reject) => { //返回一个promis
      try {
        if (!loadOptionFlag) { //是否初始化加载
          await loadScript(loadOption) // preload the ArcGIS API
          loadOptionFlag = true
        }
        const res = await loadModules(Object.values(esriMoudles)) // 加载模块
        const keys = Object.keys(esriMoudles)
        for (let i = 0, l = keys.length; i < l; i++) {
          this[keys[i]] = res[i]
        } //添加this指向
        const tileLayer = new this.TileLayer( //添加底图图层
          {  //这里用的是在线天地图
  url:'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
          })
        const basemap = new this.Basemap({  //添加基础地图
          baseLayers: [tileLayer],
          id: "dz"
        })
        const map = new this.Map({ 
          basemap: basemap
        })
        const view = new this.MapView({ //这一步完成添加地图
          container: this.divId,
          map: map,
          zoom: this.zoom,
          center: this.center
        })
        this.map = view
        this.MAP = map
        resolve(this)
      } catch (error) {
        reject(error)
      }
    })
  }
}