背景

初次接触到arcgis还是3.x版本，接手的项目是公司大佬们已经弄得差不多的项目，在项目上看看arcgis3.x是怎么用的，里面的api是怎么配的，在差不多可以自己运用一些简单的arcgis的时候，公司正好说要重构其中的某个项目，原本想着只是简单的简化之前项目的代码复杂度，在已有的逻辑上再简化，优化Dom，没想到UI构建的原图上，地图需要的arcgis4.x才能实现。

查看官方给的api

developers.arcgis.com/javascript/…

这里面给的是arcgis3.x API在arcgis4.x中的样子，

使用Arcgis4.x的常规操作之一

注意： arcgis4.x与3.x其中的不同点之一就是当你使用其中某个api市需要单独引用，而不是3.x中的全部引用

methods: {
    // 地图
    initMap() {
      const options = 
        url:'引入arcgis4.x服务，可以是在本地上的也可以是线上服务'
         //'arcgis_js_v413_sdk/arcgis_js_api/library/4.13/init.js'
 
      }
      // 将田地图转换成arcgis中的地图
      loadModules(
        [
          // 此处的组件按自己的需求加载
          'esri/Map',
          'esri/views/MapView',
          'esri/layers/TileLayer',
          'esri/layers/MapImageLayer',
          'esri/Graphic',
          'esri/layers/GraphicsLayer',
          'esri/symbols/SimpleFillSymbol',
          'esri/tasks/GeometryService',
          'esri/tasks/support/AreasAndLengthsParameters',
          'esri/geometry/geometryEngine',
          'esri/tasks/support/IdentifyParameters',
          'esri/tasks/IdentifyTask',
          'esri/symbols/PictureMarkerSymbol',
          'esri/geometry/Point',
          'esri/geometry/SpatialReference',
          'esri/symbols/TextSymbol',
          'esri/symbols/Font',
          'esri/widgets/Print',
          'esri/geometry/support/webMercatorUtils'
        ],
        options
      )
        .then(
          ([
            Map,
            MapView,
            TileLayer,
            MapImageLayer,
            Graphic,
            GraphicsLayer,
            SimpleFillSymbol,
            GeometryService,
            AreasAndLengthsParameters,
            geometryEngine,
            IdentifyParameters,
            IdentifyTask,
            PictureMarkerSymbol,
            Point,
            SpatialReference,
            TextSymbol,
            Font,
            Print,
            webMercatorUtils
          ]) => {
            var mapTileLayer = new TileLayer({
              url:	//添加底图
            'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
            })

            var layer = new MapImageLayer({
              url:'根据自己的需求添加底图服务'
          
            })
			//这个是在初始底图上添加，也可以在不同模块引入该组件后进行添加底图服务
            let map = new Map({
              layers: [mapTileLayer, layer]
            })
            const sr1 = new SpatialReference({ wkid: 4326 })
            var view = new MapView({
              container: 'mapview',
              map: map,
              // spatialReference: sr,
              center: ['地图初始坐标'],
              zoom:  // 显示地图的级别
            })
             //this指向问题需要重新赋值
            let _this = this
             //在4.x版本中需要创建when()实例，此方法采用两个输入参数：callback函数和errback函数。在callback执行时加载类的实例。该errback如果类的实例无法加载执行。
            view.when(function() {
                //解析成功就会使用该函数
              _this.$emit('getMap', {
                  //在该模块中传出所有父组件需要使用的实例
                  //父组件在接收时根据所需单独引用
                view: view,
                maps: map,
                graphic: Graphic,
                layer: graphicsLayer,
                simple: simpleFillSymbol,
                geome: GeometryService,
                areas: AreasAndLengthsParameters,
                geometry: geometryEngine,
                Identify: IdentifyParameters,
                IdentifyTask: IdentifyTask,
                MapImageLayer: MapImageLayer,
                PictureMarkerSymbol: PictureMarkerSymbol,
                Point: Point,
                SpatialReference: SpatialReference,
                TextSymbol: TextSymbol,
                Font: Font,
                print: Print,
                webMercatorUtils: webMercatorUtils
              })
            })
            //构建几何图形
            let graphicsLayer = new GraphicsLayer()
            let simpleFillSymbol = new SimpleFillSymbol()
            map.add(graphicsLayer)
          }
        )
        .catch(err => {})
    }
  }