【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 BasemapToggle from '@arcgis/core/widgets/BasemapToggle'

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

  var view = new MapView({
    container: 'viewDiv',
    map: map,
    center: [-118.80543, 34.027],
    zoom: 13,
  })
  var basemapToggle = new BasemapToggle({
    view: view,
    nextBasemap: 'satellite',
  })
  view.ui.add(basemapToggle, 'bottom-right')//控制部件位置，其他位置：top-left,top-right,bottom-left
})
</script>

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