Arcgisapi for js底图切换

Arcgisapi for js中提供了一个BasemapToggle专门用于底图的切换。

  mounted() {

    loadArcgisApiForJs().then((esriModules) => {//esriload加载Arcgisapi for js模块

      this.esriModules = esriModules;

      const sr = new esriModules.SpatialReference({

        wkid: 4490,

      });

      let baseMapLayers = getAllBasemap(sr, esriModules);//这里用自己封装的方法获取多个图层，baseMapLayers 是一个[layer1,layer2]

      for (var i = 0; i < baseMapLayers.length; i++) {//将baseMapLayers 中的每个图层都变成底图对象

        let baseMap = new esriModules.Basemap({

          baseLayers: [baseMapLayers[i]],

        });

        this.basemaps.push(baseMap);//将每个底图对象加入全局变量，this.basemaps是一个[]

      }

      this.map = new esriModules.Map({//默认使用第一个底图初始化底图

        basemap: this.basemaps[0],

      });

      this.view = new esriModules.MapView({

        container: "viewDiv",

        map: this.map,

        spatialReference: sr,

        extent: new esriModules.Extent({

          xmin: 101.79241868891418,

          ymin: 27.240765199664125,

          xmax: 113.4962209222683,

          ymax: 33.00213057473296,

          spatialReference: sr,

        }),

      });

      this.basemapToggle = new esriModules.BasemapToggle({//用上面的view生产BasemapToggle对象

        view: this.view,

      });

    });

  },

切换底图的方法：

 changeBasemap(index) {//index为切换的目的图层在全局变量this.basemaps中的index

      this.basemapToggle.nextBasemap = this.basemaps[index];

      this.basemapToggle.toggle();

    },