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 。通过这样操作就可以把地图来回切换容器了。
作者：学习委员
链接：https://juejin.cn/post/7010960895421448199