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();
},