前言
OpenLayers 是一个强大的开源地图框架，可以轻松实现地图加载与操作。而 Vue 3 则通过 Composition API 提供了更加简洁和灵活的开发体验。本文将介绍如何在 Vue 3 中结合 OpenLayers 实现对天地图的加载，包括矢量地图、卫星地图以及中文和英文标记等多种形式。
环境准备
在开始之前，请确保您的项目已经具备以下环境：
- Vue 3：一个前端框架。
- OpenLayers：地图加载库。
使用 npm 安装 OpenLayers：
npm install ol实现功能
本文实现以下功能：
- 加载天地图的矢量底图。
- 加载带有中文/英文标记的矢量地图。
- 加载天地图的卫星底图及其标记。
示例代码
1. 项目结构
以下代码展示了如何在 Vue 3 的组件中使用 OpenLayers 加载天地图。我们主要通过 Tile 和 XYZ 实现地图瓦片加载。
2. Vue 3 + OpenLayers 示例代码
<!--* @Author: 彭麒* @Date: 2024/12/4* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><button class="back-button" @click="goBack">返回</button><div class="container"><div class="w-full flex justify-center flex-wrap"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers加载引用天地图的多种形式</div></div><h4 class="my-5 ml-[130px]"><el-button type="primary" size="small" @click='tdMap()'> 矢量底图</el-button><el-button type="primary" size="small" @click='tdMap(1)'>矢量中文标记</el-button><el-button type="primary" size="small" @click='tdMap(2)'>矢量英文标记</el-button><el-button type="danger" size="small" @click='tdMap(5)'>卫星底图</el-button><el-button type="danger" size="small" @click='tdMap(3)'>卫星中文标记</el-button><el-button type="danger" size="small" @click='tdMap(4)'>卫星英文标记</el-button></h4><div id="vue-openlayers"></div></div>
</template><script setup>
import 'ol/ol.css';
import {ref, onMounted} from 'vue';
import {Map, View} from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import router from "@/router";
const goBack = () => {router.push('/OpenLayers');
};
const map = ref(null);
const source = ref(new XYZ({}));const tdMap = (n = 0) => {source.value.setUrl(getUrl(n));
};const getUrl = (n) => {const key = 'b11261d4e941c04479a7e22d6d4ecbd8';let url = '';switch (n) {case 1: // 矢量中文标记url = 'http://t{1-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=';break;case 2: // 矢量英文标记url = 'http://t{1-7}.tianditu.gov.cn/eva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=';break;case 3: // 卫星中文标记url = 'http://t{1-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=';break;case 4: // 卫星英文标记url = 'http://t{1-7}.tianditu.gov.cn/eia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=';break;case 5: // 卫星底图url = 'http://t{1-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=';break;default: // 矢量底图url = 'http://t{1-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=';}return url + key;
};const initMap = () => {const tiandiMap = new Tile({source: source.value,});map.value = new Map({target: 'vue-openlayers',layers: [tiandiMap],view: new View({center: [13247019.404399557, 4721671.572580107],zoom: 3,}),});
};onMounted(() => {initMap();tdMap();
});</script><style scoped>
.container {width: 840px;height: 590px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 400px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>
效果展示
运行项目后，页面中央将显示一个 800x400 的地图，点击不同的按钮可以切换地图的不同样式。
注意事项
-
天地图密钥（Key）
请确保替换代码中的您申请的Key值，到天地图官网申请开发者密钥。 -
性能优化
使用 OpenLayers 加载地图时，请根据实际需求设置zoom范围，避免过多瓦片加载影响性能。
总结
本文展示了如何在 Vue 3 中使用 OpenLayers 加载天地图，并通过简单的切换逻辑实现多种地图样式的动态加载。结合 Vue 的 Composition API 和 OpenLayers 的强大功能，可以为项目开发提供更灵活和高效的地图功能。
如果您觉得本文对您有帮助，请点个赞支持！🎉