Vite + Vue3 + OpenLayers 切换地图容器

Vite + Vue3 + OpenLayers 切换地图容器

本文简介

Vite + Vue3 + OpenLayers 切换地图容器

将地图切换到不同容器里展示。

不管在地图上做任何操作，切换容器后，操作过的内容也是会同步过去。

思路

使用 ol 提供的方法可以获取 当前地图所在容器 和 设置地图到新的容器 里。

• Map.getTarget() 获取当前地图所在容器
• Map.setTarget() 设置地图到指定容器

编码

<template>
  <div class="map__container">
    <!-- 地图容器 1 -->
    <div id="map1" class="map__x"></div>
      
    <!-- 地图容器 2 -->
    <div id="map2" class="map__x"></div>
  </div>

  <!-- 切换地图容器按钮 -->
  <button class="btn" @click="changeMap">change</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM' // 注意：【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题！！！！】
import 'ol/ol.css'

const map = ref(null) // 绑定地图实例的变量

// 初始化地图并渲染
function initMap () {
  // 地图实例
  map.value = new Map({
    layers: [ // 图层
      new Tile({
        source: new OSM() // 图层数据源
      })
    ],
    view: new View({ // 地图视图
      projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      center: [114.064839, 22.548857], // 深圳坐标
      minZoom:10, // 地图缩放最小级别
      zoom: 12 // 地图缩放级别（打开页面时默认级别）
    })
  })

  map.value.setTarget('map1') // 使用 setTarget 绑定地图容器
}

// 切换容器事件
function changeMap() {
  // 获取当前地图容器，并进行判断
  let target = map.value.getTarget() === 'map1' ? 'map2' : 'map1'
  // 重新设置地图容器
  map.value.setTarget(target)
}

onMounted(() => {
  // 在元素加载完之后再执行地图初始化
  initMap()
})
</script>

<style lang="scss" scoped>
.map__container {
  width: 800px;
  height: 380px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;

  .map__x {
    width: 380px;
    height: 380px;
    box-sizing: border-box;
    border: 1px solid #ccc;
  }
}
</style>

let target = map.value.getTarget() === 'map1' ? 'map2' : 'map1'

如果当前在 map1 的话，就返回 map2 ，否则返回 map1 。通过这样操作就可以把地图来回切换容器了。

更多推荐

本例展示地址（vite+vue3+ol）

本例仓库（vite+vue3+ol）

ol在vue2中使用（预览）

ol在vue2中使用（仓库）

OpenLayers 官网

《WebGIS之OpenLayers全面解析（第2版）》

如果不清楚 OpenLayers 是什么，可以阅读： 『Vite + Vue3 + OpenLayers 起步』