📌 前言
在 GIS（地理信息系统）开发中，OpenLayers 是一个非常强大的 Web 地图渲染库，支持多种地图数据格式和交互操作。在 Vue 3 中，我们可以利用 Composition API 来封装和管理 OpenLayers 地图的状态，从而更高效地开发地图应用。
本篇文章将详细介绍如何在 Vue 3 中使用 OpenLayers 来实现 多视图地图联动功能，即两个地图窗口共享同一个视图（View），从而实现同步缩放、拖动等操作。
📌 实现目标
-
在 Vue 3 组件中加载 两个 OpenLayers 地图，它们共享 同一个 View，实现地图联动。
-
使用 Vue 3 Composition API (
setup、onMounted、onUnmounted)，优化代码结构。 -
在组件销毁时正确清理地图实例，避免内存泄漏。
📌 效果预览
联动效果如下（拖动或缩放其中一个地图，另一个地图同步变化）：
📌 代码实现
📌 1. 安装 OpenLayers
如果你的 Vue 3 项目还没有安装 OpenLayers，可以使用 npm 或 yarn 安装：
# 使用 npm 安装 npm install ol
# 或者使用 yarn 安装 yarn add ol📌 2. 编写 Vue 组件
创建一个 Vue 组件，如 MapView.vue，代码如下：
<!--* @Author: 彭麒* @Date: 2025/3/26* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><div class="container"><div class="w-full flex justify-center"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers实现视图联动功能</div></div><div id="vue-openlayers1"></div><h5>mp1上 ----- mp2下</h5><div id="vue-openlayers2"></div></div>
</template><script setup>
import { onMounted } from "vue";
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";onMounted(() => {const view = new View({projection: "EPSG:4326",center: [114.064839, 22.548857],zoom: 4});new Map({target: "vue-openlayers1",layers: [new TileLayer({source: new OSM()})],view: view});new Map({target: "vue-openlayers2",layers: [new TileLayer({source: new OSM()})],view: view});
});
</script><style scoped>
.container {width: 840px;height: 680px;margin: 0 auto;border: 1px solid #42B983;
}
#vue-openlayers1,
#vue-openlayers2 {width: 800px;height: 250px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>
📌 3. 代码解析
📌 (1) 为什么使用 ref 绑定 DOM？
在 Vue 3 中，setup 语法不能直接访问 this，因此我们使用 ref 绑定 div 作为 OpenLayers 地图的 target。
<div ref="mapContainer1"></div>
<div ref="mapContainer2"></div>在 onMounted 之后，Vue 会将 ref 绑定到真实的 DOM 元素上，我们就可以用它们来初始化 OpenLayers 地图。
📌 (2) 如何实现地图联动？
两个地图都共享同一个 View 对象，这样它们的状态（中心点、缩放级别等）会保持同步：
const view = new View({ projection: "EPSG:4326", center: [114.064839, 22.548857], zoom: 4
});然后在两个地图实例中都传入相同的 view：
new Map({ target: mapContainer1.value, layers: [new TileLayer({ source: new OSM() })], view: view
});
new Map({ target: mapContainer2.value, layers: [new TileLayer({ source: new OSM() })], view: view
});这样，无论你拖动哪个地图，另一个都会同步变化。
📌 (3) 为什么要在 onUnmounted 释放地图？
如果 Vue 组件多次挂载和卸载，而不清理 Map 实例，可能会导致内存泄漏。因此在 onUnmounted 中，我们需要调用：
if (map1) { map1.setTarget(null); map1 = null;
}
if (map2) {map2.setTarget(null); map2 = null;
}这可以确保 Vue 组件销毁时，OpenLayers 也正确销毁地图实例。
📌 4. 运行效果
使用 npm run dev 启动 Vue 项目后，你会看到两个 OpenLayers 地图窗口，并且它们会同步缩放和拖动，达到地图联动的效果。
📌 5. 结论
通过本次实践，我们学到了：
-
如何在 Vue 3 组件中使用 OpenLayers。
-
如何实现两个地图的视图联动。
-
如何正确管理 OpenLayers 地图实例，防止内存泄漏。
希望本篇文章能帮助你在 Vue 3 开发中更好地使用 OpenLayers！如果你觉得文章有用，欢迎点赞、收藏、评论！🎉
📌 6. 相关链接
-
Vue 官网：Vue.js - The Progressive JavaScript Framework | Vue.js
-
OpenLayers 官网：OpenLayers - Welcome
💬 你对 OpenLayers 还有哪些疑问？欢迎在评论区交流！ 🚀
