api版本:4.21, 链接:Map | API Reference | ArcGIS API for JavaScript 4.21 | ArcGIS Developer
原理: 使用了Element 2.x框架的select组件,点击对应的value,map.basemap="newBasemap",实现图层点击切换。
实现:
代码:
<template>
<div id="content">
<!-- <div id="basemapGalleryDiv"></div> -->
<div class="tree">
<el-select v-model="value" placeholder="请选择" siez="small" @change="change">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</template>
<script>
import { loadModules } from "esri-loader";
export default {
data() {
return {
value:'默认',
options: [{
value: 'streets',
label: '默认'
}, {
value: 'oceans',
label: '海岸'
}, {
value: 'streets-night-vector',
label: '街道(夜晚)'
}, {
value: 'terrain',
label: '地形'
}],
};
},
props: ["view", "layer", "map"],
methods: {
change(a){
console.log(a)
this.map.basemap=a;
},
initMap(view, layer, map) {
let options = {
url: "https://js.arcgis.com/4.20/",
css: "https://js.arcgis.com/4.20/esri/themes/light/main.css",
};
loadModules(
[
"esri/views/MapView",
"esri/Map",
"esri/layers/MapImageLayer",
"esri/widgets/BasemapToggle",
"esri/Basemap",
"esri/widgets/BasemapGallery",
"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
],
options
).then(
([
MapView,
Map,
MapImageLayer,
BasemapToggle,
Basemap,
BasemapGallery,
LocalBasemapsSource,
]) => {
}
);
},
},
mounted() {
this.initMap(this.view, this.layer, this.map); // 调用方法
},
};
</script>
<style scoped="scoped">
#content {
width: 100px;
}
#basemapGalleryDiv {
width: 200px;
height: 160px;
flex-direction: row;
flex-wrap: wrap;
position: absolute;
right: 20px;
bottom: 20px;
}
#content >>> .esri-basemap-gallery__item {
position: relative;
display: flex;
align-items: center;
padding: 6 px 7 px;
cursor: pointer;
border-left: 3 px solid transparent;
border-right: 3 px solid transparent;
animation: esri-fade-in 500ms ease-in-out;
transition: background-color 250ms ease-in-out;
flex-direction: row;
flex-wrap: nowrap;
/* align-content: center; */
/* justify-content: flex-start; */
}
.tree{
position: absolute;
left: 1339.5px;
}
</style>