ol点击切换矢量、影像、地形图层(天地图)

一、创建影像、矢量、地形切换框
1、创建layer-control.vue文件

<template>
  <div class="layer-control-container">
    <div
      v-for="item of list"
      :key="item.id"
      class="layer"
      :class="{active: item.id === currentLayerId}"
      @click.stop="changeBaseLayer(item.id)"
    />
  </div>
</template>

<script>
export default {
  name: 'LayerControlContainer',

  components: {

  },
  mixins: [

  ],
  props: {},

  data() {
    return {
      currentLayerId: 'VECTOR', // 默认影像
      list: [
        {
          name: '影像',
          id: 'RASTER'
        },
        {
          name: '矢量',
          id: 'VECTOR'
        },
        {
          name: '地形',
          id: 'TOPOGRAPHY'
        }
      ]

    }
  },
  computed: {

  },
  watch: {
    currentLayerId(newId, oldId) {
      this.$emit('changeMap', { 'newId': newId, 'oldId': oldId })
    }

  },
  mounted() {
  },
  methods: {
    changeBaseLayer(id) {
      this.currentLayerId = id
    }
  }
}
</script>

<style lang="scss" scoped>
.layer-control-container {
  position: absolute;
  z-index: 10;
  width: 190px;
  height: 44px;
  bottom: 82px;
  right: 20px;

  .layer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 60px;
    height: 44px;
    transition: 0.5s transform;
    transform: translateX(0);
    cursor: pointer;
    &.active {
      z-index: 4;
      &:nth-of-type(1) {
        background: url('../../assets/img/image/img_yingxiang_p.png') no-repeat
          center / contain;
      }

      &:nth-of-type(2) {
        background: url('../../assets/img/image/img_shiliang_p.png') no-repeat
          center / contain;
      }

      &:nth-of-type(3) {
        background: url('../../assets/img/image/img_dixing_p.png') no-repeat center /
          contain;
      }
    }

    &:nth-of-type(1) {
      background: url('../../assets/img/image/img_yingxiang_n.png') no-repeat center /
        contain;
    }

    &:nth-of-type(2) {
      background: url('../../assets/img/image/img_shiliang_n.png') no-repeat center /
        contain;
    }

    &:nth-of-type(3) {
      background: url('../../assets/img/image/img_dixing_n.png') no-repeat center /
        contain;
    }
  }

  &:hover {
    .layer:nth-of-type(2) {
      transform: translateX(-65px);
    }

    .layer:nth-of-type(3) {
      transform: translateX(-130px);
    }
  }
}
</style>

img_dixing_n.png

img_yingxiang_p.png

img_yingxiang_n.png

img_shiliang_p.png

img_dixing_p.png

img_shiliang_n.png

效果如下：

二、初始化地图，将组件引入至地图
创建map.vue文件

<template>
  <div id="map" class="map">
    <layerControl @changeMap="changeMap" />
  </div>
</template>
<script>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import { Map, View, Feature } from 'ol'
import { Style, Fill, Icon, Text } from 'ol/style'
import { Point } from 'ol/geom'
import { fromLonLat } from 'ol/proj'
import layerControl from './layer-control.vue'
import { Tile } from 'ol/layer'
import { defaults as defaultControls } from 'ol/control'

export default {
  components: { layerControl },
  props: {
    // eslint-disable-next-line vue/require-default-prop
  },
  data() {
    return {
      map: null,
    }
  },
  created() {
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap(options = {}, config = { v: true }) {
      const KEY = 'b9031f80391e6b65bd1dd80dcde1b097'
      const tianDiTu = {
      	// 矢量
        vector: `https://t2.tianDiTu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`,
        // 影像
        raster: `https://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`,
        // 地形
        topography: `https://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`,
        // 标注图层(就是我们所看见的行政区名称，道路)
        sourceMark: `http://t4.tianditu.com/DataServer?T=cva_w&tk=${KEY}&x={x}&y={y}&l={z}`
      }
      const tileUrlFunction = function(xyz) {
        const z = xyz[0]
        const x = xyz[1]
        const y = xyz[2]
        return `https://rt1.map.gtimg.com/realtimerender?z=${z}&x=${x}&y=${y}&type=vector&style=0&key=KSMBZ-3SMCV-LTYPU-UPYHY-GI2WF-UWBXB`
      }
      const crtlayerXYZ = function(id, url, visible, tileUrlFunction = function() { }) {
        return new Tile({
          source: new XYZ({
            url,
            tileUrlFunction
          }),
          visible,
          id
        })
      }
      this.map = new Map({
        layers: [
          crtlayerXYZ('VECTOR', tianDiTu.vector, !!config.v, tileUrlFunction),
          crtlayerXYZ('RASTER', tianDiTu.raster, !!config.r, tileUrlFunction),
          crtlayerXYZ('TOPOGRAPHY', tianDiTu.topography, !!config.t, tileUrlFunction),
          crtlayerXYZ('SOURCEMARK', tianDiTu.sourceMark, !!config.v, tileUrlFunction)
        ],
        target: 'map',
        view: new View({
          projection: 'EPSG:4326',
          center: [108.939062, 34.374741],
          zoom: 6,
          maxZoom: 18,
          ...options
        }),
        controls: defaultControls({
          zoom: false,
          rotate: false,
          attribution: false
        })
      })
    },
    getLayerByProp(key, value) {
      return this.map.getLayers()
        .getArray()
        .filter((layer) => layer.get(key) === value)
    },
    // 切换显示隐藏地图
    changeMap(val) {
      this.getLayerByProp('id', val.oldId)[0].setVisible(false)
      this.getLayerByProp('id', val.newId)[0].setVisible(true)
    }
  }
}
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: calc(100vh - 135px);
  position: relative;
}
</style>