108.在 Vue 3 中使用 OpenLayers 加载 XYZ 地图的示例
前言
在前端地图开发中，OpenLayers 是一个非常强大的开源库，支持各种地图服务的加载和交互，包括 XYZ、WMS、WMTS、矢量图层等。本文将介绍如何在 Vue 3 项目中使用 OpenLayers 加载 XYZ 瓦片地图，并以高德地图为例进行演示。
一、XYZ 瓦片地图简介
XYZ 瓦片地图是一种基于 z/x/y 坐标规则的地图切片格式，它将地图划分为多个瓦片，客户端根据当前视图范围动态加载所需的瓦片，减少数据传输，提高渲染性能。
XYZ 瓦片地图 URL 规则
XYZ 瓦片地图的 URL 结构一般如下：
https://example.com/{z}/{x}/{y}.png
-
{z}代表缩放级别（Zoom Level） -
{x}和{y}代表瓦片的坐标 -
{a-c}或{1-4}用于负载均衡（某些地图服务提供多个服务器节点）
例如，高德地图 的 XYZ 瓦片服务：
http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6这里 {1-4} 代表 4 台服务器，style=6 代表高德标准地图。
二、项目环境
1. 创建 Vue 3 项目
首先，确保你的环境中已安装 Node.js（建议 16+），然后使用 Vite 创建 Vue 3 项目：
npm create vite@latest vue-openlayers-demo --template vue
cd vue-openlayers-demo
npm install2. 安装 OpenLayers
使用 npm 安装 OpenLayers：
npm install ol三、Vue 3 + OpenLayers 实现 XYZ 地图加载
在 src/components/OpenLayersMap.vue 文件中编写以下代码：
完整代码
<!--
* @Author: 彭麒
* @Date: 2025/3/27
* @Email: 1062470959@qq.com
* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
-->
<template>
<div class="container">
<div class="w-full flex justify-center flex-wrap">
<div class="font-bold text-[24px]">在Vue3中使用OpenLayers加载XYZ地图的示例</div>
</div>
<div id="vue-openlayers"></div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
const xyzUrl = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6'
const map = ref(null);
let geoLayer = null;
const initMap = () => {
geoLayer = new TileLayer({
source: new XYZ({
url: xyzUrl,
}),
});
map.value = new Map({
target: "vue-openlayers",
layers: [geoLayer],
view: new View({
projection: "EPSG:4326",
center: [100.15, 16.79],
zoom: 5,
}),
});
};
onMounted(() => {
initMap();
});
</script>
<style scoped>
.container {
width: 840px;
height: 570px;
margin: 50px auto;
border: 1px solid #42B983;
}
#vue-openlayers {
width: 800px;
height: 450px;
margin: 0 auto;
border: 1px solid #42B983;
position: relative;
}
</style>
四、代码解析
1. Vue 3 Composition API
-
通过
script setup语法使代码更加简洁。 -
使用
onMounted生命周期钩子确保地图在 DOM 加载后初始化。
2. OpenLayers 相关配置
-
Map：创建 OpenLayers 地图实例。 -
View：设置地图投影、中心点、缩放级别。 -
TileLayer：添加 XYZ 瓦片图层。 -
XYZ：指定瓦片地图服务 URL。
3. 注意事项
-
投影问题：
-
高德地图使用
EPSG:3857（Web Mercator），所以projection需要设为EPSG:3857。 -
使用
fromLonLat([lng, lat])转换经纬度为 Web Mercator 坐标。
-
-
CORS 跨域问题：
-
部分 XYZ 地图服务可能有跨域限制，必要时可使用代理或
crossOrigin: "anonymous"。
-
五、效果展示
成功运行后，你可以在浏览器中看到加载的 高德地图 XYZ 瓦片：
🚀 效果如下：
六、常见问题
1. 地图不显示？
-
检查 Console 是否有错误：
-
"ol.css" not found→ 确保import "ol/ol.css";正确引入。 -
"cross-origin request blocked"→ 可能是 CORS 限制，使用代理服务器解决。
-
2. 如何修改地图中心点？
修改 View 中的 center：
center: fromLonLat([121.4737, 31.2304]), // 上海3. 如何切换不同的 XYZ 地图？
替换 xyzUrl：
const xyzUrl = "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"; // OSM 地图七、总结
本文介绍了如何在 Vue 3 项目中使用 OpenLayers 加载 XYZ 瓦片地图，并以高德地图为例进行演示。通过本文，你学到了：
-
OpenLayers XYZ 瓦片地图的基本概念。
-
Vue 3 + Composition API 如何初始化 OpenLayers。
-
XYZ 瓦片地图的 URL 规则及投影转换。
希望这篇文章能帮助到你！如果你有更好的建议，欢迎交流讨论。💡🎉
🔗 参考资料
-
OpenLayers 官方文档
-
高德地图开发者文档