【ArcGIS API】加载多种底图

 ArcGIS API for JavaScript系列文章汇总：【ArcGIS API】汇总篇-CSDN博客

效果`

具体实现

<template>
  <div id="viewDiv" class="viewDiv"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import BasemapGallery from '@arcgis/core/widgets/BasemapGallery'

onMounted(() => {
  var map = new Map({
    basemap: 'topo-vector',
  })

  var view = new MapView({
    container: 'viewDiv',
    map: map,
    center: [-118.80543, 34.027],
    zoom: 13,
  })

  var basemapGallery = new BasemapGallery({
    view: view,
    source: {
      portal: {
        url: 'https://www.arcgis.com',
        useVectorBasemaps: true, // Load vector tile basemaps
      },
    },
  })
  view.ui.add(basemapGallery, 'top-right')
})
</script>

<style scoped>
.viewDiv {
  height: 100vh;
  width: 100vw;
}
</style>