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>