8.在 Vue 3 中使用 OpenLayers 加载天地图示例（多种形式）
前言
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 的强大功能，可以为项目开发提供更灵活和高效的地图功能。
如果您觉得本文对您有帮助，请点个赞支持！🎉
原文地址：https://blog.csdn.net/Miller777_/article/details/144230500
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！