// maptype.js

import { XYZ, BingMaps } from "ol/source";

let list = [
  {
    name: "高德地图",
    value: new XYZ({
      url: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
    }),
    id: "0",
  },
  {
    name: "必应地图",
    value: new BingMaps({
      key: "BingMap key",
      imagerySet: "RoadOnDemand",
    }),
    id: "1",
  },
];

export default list;

// import
import mapType from "@/utils/openlayers/maptype";

// data
data() {
  return {
    tileLayer: null, // 地图层
    mapList: null, // 地图列表
    locaMap: "1",
  };
},
mounted() {
  this.mapList = mapType;
  this.tileLayer = new TileLayer({
    source: mapType.find((e) => e.id === this.locaMap).value,
  });
  this.initMap();
},

// methods
initMap() {
  this.openMap = new Map({
    target: "map",
    layers: [this.tileLayer],
    view: new View({
      center: olProj.fromLonLat([108.945951, 34.465262]),
      zoom: 1,
    }),
    controls: [],
  });
  ...
},

// main.js
import "element-ui/lib/theme-chalk/index.css";
import { Select, Option } from "element-ui";
Vue.use(Select);
Vue.use(Option);
// Home.vue
// template
<div class="map-toolbar">
  <!-- 地图选择 -->
  <el-select v-model="locaMap" style="width: 150px">
    <el-option
      v-for="item in mapList"
      :label="item.name"
      :value="item.id"
      :key="item.id"
      @click.native="setMapSource(item)"
    ></el-option>
  </el-select>
</div>
// methods添加切换地图方法
setMapSource(e) {
  this.tileLayer.setSource(e.value);
},

// webStorage.js
const locaMap = "locaMap";

export function getMap() {
  return localStorage.getItem(locaMap);
}

export function setMap(e) {
  return localStorage.setItem(locaMap, e);
}

import { getMap, setMap } from "@/utils/webStorage";

data() {
  return {
    locaMap: getMap() || "0",
  };
},

// 切换地图
setMapSource(e) {
  this.tileLayer.setSource(e.value);
  setMap(e.id)
},