98.在 Vue3 中使用 OpenLayers 根据 Resolution 的不同显示不同的地图

在 Vue3 中使用 OpenLayers 根据 Resolution 的不同显示不同的地图

前言

在 Web GIS（地理信息系统）应用开发中，地图的 Resolution（分辨率）是一个重要的概念。不同的 Resolution 适用于不同的地图层级，有时我们希望在不同的 Resolution 范围内切换不同的地图源，以优化用户体验。例如，在小尺度时使用 OpenStreetMap（OSM），在大尺度时使用高德地图（Amap）。

本文将介绍如何在 Vue 3 组合式 API（Composition API）中，使用 OpenLayers 实现一个根据 Resolution 自动切换地图源的示例。

---

1. 初始化 Vue 3 项目

首先，我们需要创建一个 Vue 3 项目。如果你还没有 Vue 3 的开发环境，可以使用 Vite 快速搭建：

npm create vite@latest vue3-openlayers --template vue
cd vue3-openlayers
npm install

然后，安装 OpenLayers：

npm install ol

---

2. 编写 Vue 组件

在 src/components/OpenLayersMap.vue 文件中，我们创建一个 Vue 组件，该组件会根据当前 Resolution 选择不同的地图源。

完整代码

<template><div class="container"><div class="w-full flex justify-center"><div class="font-bold text-[24px]">在 Vue3 中使用 OpenLayers 根据 Resolution 的不同，显示不同的地图</div></div><h4>Resolution 分界点：3000， 当前 Resolution 值：{{ cResolution }}</h4><div id="vue-openlayers"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';const map = ref(null);
const cResolution = ref(6);const initMap = () => {const osmLayer = new Tile({source: new OSM(),minResolution: 30,maxResolution: 3000,});const amapLayer = new Tile({source: new XYZ({url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6",}),minResolution: 3000,maxResolution: 30000,});map.value = new Map({target: "vue-openlayers",layers: [osmLayer, amapLayer],view: new View({center: [663600, 4723680],zoom: 6,projection: 'EPSG:3857',}),});// 监听地图移动结束事件map.value.on('moveend', () => {const resolution = map.value?.getView()?.getResolution();if (resolution) {cResolution.value = Math.round(resolution);}});
};onMounted(initMap);
</script><style scoped>
.container {width: 840px;height: 590px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 420px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>

---

3. 代码解析

1. 初始化地图

在 initMap 方法中，我们创建了一个 Map 实例，并绑定到 #vue-openlayers 容器中。

2. 添加不同的地图源

我们使用 Tile 图层分别添加了 OSM 地图（30 ≤ Resolution ≤ 3000）和高德地图（3000 ≤ Resolution ≤ 30000）。

3. 监听 Resolution 变化

通过 map.on('moveend', callback) 监听 moveend 事件，每当地图缩放或移动结束时，更新 cResolution 值。

---

4. 运行效果

将 OpenLayersMap.vue 组件导入 App.vue，并运行 npm run dev，然后在浏览器中访问 http://localhost:5173/。

实际效果：

• 缩小地图时，显示 OSM 地图。
• 放大地图时，自动切换到高德地图。
• 界面上实时显示当前 Resolution。

---

5. 结论

本文介绍了如何在 Vue 3 组合式 API 中使用 OpenLayers 监听地图 Resolution，并根据不同的 Resolution 切换地图源。这种方法适用于 Web GIS 开发中的多级地图展示需求。

你可以根据需求进一步优化，例如：

• 添加更多地图源（如 Google Maps、Bing Maps）。
• 使用 watch 监听 cResolution，在特定阈值时执行自定义操作。

希望本文对你有所帮助，欢迎交流和指正！🎯

---

6. 参考资料

• OpenLayers 官方文档
• Vue 3 官方文档
• 高德地图 API

如果你觉得这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注👀！