Arcgis js api && Element UI 自定义底图(basemap)切换

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>