vue3 + arcgis.js4.x---卷帘模式

这里使用天地图的矢量图和影像图作为卷帘对比 （tk自行申请）

// 初始化地图
map: new Map({
  basemap: new Basemap({
    baseLayers: [
      new WebTileLayer(
        'http://{subDomain}.tianditu.com/DataServer?T=vec_w&X={col}&Y={row}&L={level}&tk=',
        {
          copyright: 'Tianditu',
          id: 'vec_w',
          subDomains: ['t0', 't1', 't2']
        }
      ),
      new WebTileLayer(
        'http://{subDomain}.tianditu.com/DataServer?T=cva_w&X={col}&Y={row}&L={level}&tk=',
        {
          copyright: 'Tianditu',
          id: 'cva_w',
          subDomains: ['t0', 't1', 't2']
        }
      ),
      new WebTileLayer(
        'http://{subDomain}.tianditu.com/DataServer?T=img_w&X={col}&Y={row}&L={level}&tk=',
        {
          copyright: 'Tianditu',
          id: 'img_w',
          subDomains: ['t0', 't1', 't2']
        }
      ),
      new WebTileLayer(
        'http://{subDomain}.tianditu.com/DataServer?T=cia_w&X={col}&Y={row}&L={level}&tk=',
        {
          copyright: 'Tianditu',
          id: 'cia_w',
          subDomains: ['t0', 't1', 't2']
        }
      )
    ]
  })
})

// 卷帘
// import Swipe from '@arcgis/core/widgets/Swipe'
const swipe = new Swipe({
  view: window.customMap,
  leadingLayers: [
    window.customMap.map.findLayerById('vec_w'),
    window.customMap.map.findLayerById('cva_w')
  ],
  trailingLayers: [
    window.customMap.map.findLayerById('img_w'),
    window.customMap.map.findLayerById('cia_w')
  ],
  direction: 'horizontal', // swipe widget will move from top to bottom of view
  position: 50 // position set to middle of the view (50%)
})
window.customMap.ui.add(swipe)