vue2+Openlayers实现多图层切换（二）

前言

这是个人对于初学openlayers的总结，如果有不足之处，欢迎大家指正。

介绍

本文章内容挺简单的，就是实现多个图层的简单切换，相较于之前通过简单的选择标签切换提升了一点，本节内容使用了一下组件通信实现。
vue+Openlayers加载和切换OSM，高德，谷歌等地图（一）

框架组成

主要是四部分：baseMap.vue，LayerSwitcher.vue，mapLayer.js，Home.vue

baseMap.vue

<template>
  <div class="map-container">
    <!-- 父传子数据 -->
    <LayerSwitcher
      :layers="layersData"
      :config="mapconfig"
      @layer-change = 'handleLayerChange'
    />
    <div id="map" ref="mapContainer"></div>
  </div>
</template>

<script>
import { layersData, mapconfig } from '@/api/mapLayers'
import { Map, View } from 'ol'
import LayerSwitcher from './LayerSwitcher.vue'
import { fromLonLat } from 'ol/proj'

export default {
  name: 'baseMap',
  components: { LayerSwitcher },
  data () {
    return {
      map: null,
      layersData,
      mapconfig
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.map = new Map({
        target: this.$refs.mapContainer,
        layers: layersData,
        view: new View({
          projection: 'EPSG:4326',
          center: fromLonLat([114.3, 30.5]),
          zoom: 8,
          maxZoom: 18
        })
      })
    },
    handleLayerChange (layerId) {
      console.log('Switching to layer:', layerId)
      this.layersData.forEach(layer => {
        console.log('Checking layer:', layer.get('key'), layerId)
        layer.setVisible(layer.get('key') === layerId)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .map-container {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  #map {
    width: 100%;
    height: 100%;
  }
</style>

图层切换：LayerSwitcher.vue

<template>
  <div class="map_switch" @mouseover="isExpend = true" @mouseout="isExpend = false">
    <div
      class="map_switch_item"
      v-for="item in config"
      :key="item.layer_id"
      :class="{ active: activeLayer === item.layer_id }"
      @click="switchLayer(item.layer_id)"
    >
      <div class="hoverType">
        <div :class="item.className"></div>
        <div class="map_dom">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'LayerSwitcher',
  props: {
    config: Array,
    layers: Array
  },
  data () {
    return {
      activeLayer: 'osmLayer',
      isExpend: false
    }
  },
  methods: {
    switchLayer (layerId) {
      this.activeLayer = layerId
      // 通知父组件切换图层
      this.$emit('layer-change', layerId)
    }
  }
}
</script>

<style lang="less" scoped>
.map_switch {
  position: absolute;
  right: 50px;
  top: 15px;
  z-index: 999;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  background: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.map_switch:hover {
  width: auto;
  overflow: visible;
}

.map_switch_item {
  min-width: 58px;
  padding: 0 8px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  transition: all 0.3s;

  &.active {
    background: rgba(255, 255, 255, 0.8);
    border-color: #0078d4;
  }
}

.map_switch:not(:hover) .map_switch_item:not(.active) {
  display: none;
}

.hoverType {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vecType {
  width: 100%;
  height: 38px;
  background: url(../assets/indexImage.jpg) no-repeat -154px -202px;
}

.imgType {
  width: 100%;
  height: 38px;
  background: url(../assets/indexImage.jpg) no-repeat -154px -202px;
}

.map_bom {
  height: 22px;
  line-height: 12px;
  color: #333333;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.5px;
}
</style>

存放数据：mapLayer.js

import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'

// OSM
const osmLayer = new TileLayer({
  visible: true,
  key: 'osmLayer',
  source: new XYZ({
    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  })
})

// Arcgis
const arcgisImgLayer = new TileLayer({
  visible: false,
  key: 'arcgisImgLayer',
  source: new XYZ({
    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    crossOrigin: 'anonymous'
  })
})

// 高德
const gaodeImgLayer = new TileLayer({
  visible: false,
  key: 'gaodeImgLayer',
  source: new XYZ({
    url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    crossOrigin: 'anonymous'
  })
})

// 谷歌
const googleImgLayer = new TileLayer({
  visible: false,
  key: 'googleImgLayer',
  source: new XYZ({
    url: 'http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
    crossOrigin: 'anonymous'
  })
})

// 图层组
const layersData = [
  osmLayer,
  arcgisImgLayer,
  gaodeImgLayer,
  googleImgLayer
]

const mapconfig = [
  { layer_id: 'osmLayer', label: 'OSM影像', className: 'imgType' },
  { layer_id: 'arcgisImgLayer', label: 'ersi影像', className: 'imgType' },
  { layer_id: 'gaodeImgLayer', label: '高德街道', className: 'vecType' },
  { layer_id: 'googleImgLayer', label: '谷歌影像', className: 'imgType' }
]

export { layersData, mapconfig }

Home.vue

<template>
  <BaseMap/>
</template>

<script>
import BaseMap from '@/components/baseMap.vue'

export default {
  name: 'HomePage',
  components: { BaseMap }
}

</script>

<style scoped>

</style>

小结

css样式写的可能不太好，大家可以尝试改动。