在 Web 地图开发中，OpenLayers 是一个非常强大且灵活的 JavaScript 库，它可以帮助我们加载各种地图层（如 OpenStreetMap、Google Maps、Bing Maps 等）。而 Stamen 地图是一个非常常见的地图样式，它提供了多种地图样式，如 Watercolor、Toner、Terrain 等，适用于不同的开发需求。
本文将详细讲解如何在 Vue 3 中结合 OpenLayers 来加载和切换 Stamen 地图图层，帮助你在自己的项目中快速实现这一功能。
一、项目依赖安装
在开始编写代码之前，我们首先需要安装必要的依赖项。在你的 Vue 3 项目中，运行以下命令来安装 openlayers 和 element-plus（用于展示按钮的 UI 框架）。
npm install ol npm install element-plusol是 OpenLayers 的核心库。element-plus是我们用来展示按钮的 UI 库，你可以根据需要选择其他 UI 库。
二、创建 Vue 3 组件
在 Vue 3 中，我们将使用 Composition API 来管理组件的状态和生命周期。下面是一个实现的完整示例，展示如何加载不同的 Stamen 地图图层。
1. 基础 HTML 和样式
在 src/views/OpenLayers/Stamen.vue 文件中创建一个新的 Vue 组件：
<!--* @Author: 彭麒* @Date: 2024/12/5* @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加载引用Stamen地图（多种形式）</div></div><h4 class="my-5 ml-[10px]"><el-button type="primary" size="small" @click="StamenMap('watercolor')">Watercolor</el-button><el-button type="primary" size="small" @click="StamenMap('toner')">Toner</el-button><el-button type="primary" size="small" @click="StamenMap('terrain')">Terrain</el-button></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 XYZ from 'ol/source/XYZ';
import router from '@/router';const goBack = () => {router.push('/OpenLayers');
};const map = ref(null);// Initialize the map
const initMap = () => {map.value = new Map({target: 'vue-openlayers',layers: [],view: new View({center: [13247019.404399557, 4721671.572580107],zoom: 3})});console.log('Map initialized:', map.value);
};const StamenMap = (layerType) => {if (!map.value) {console.error('Map is not initialized');return;}// Clear all layersmap.value.getLayers().getArray().forEach((layer) => {if (layer) {map.value.removeLayer(layer);}});const stamenLayer = new Tile({source: new XYZ({url: `https://stamen-tiles.a.ssl.fastly.net/${layerType}/{z}/{x}/{y}.jpg`})});map.value.addLayer(stamenLayer);console.log(`Stamen layer of type ${layerType} added`);
};// Initialize the map and add the default layer on mount
onMounted(() => {initMap();StamenMap('watercolor');
});
</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>2. 代码解析
Map 和 View 的初始化
首先，我们通过 Map 和 View 对象来初始化 OpenLayers 地图。地图容器通过 target 指定，在该容器中展示地图。View 对象定义了地图的视图设置，包括地图的中心坐标和初始缩放级别。
const initMap = () => {map.value = new Map({target: 'vue-openlayers',layers: [],view: new View({center: [13247019.404399557, 4721671.572580107],zoom: 3})});console.log('Map initialized:', map.value);
};切换不同的 Stamen 图层
为了切换不同的 Stamen 地图图层，我们通过 StamenMap 方法来清除当前地图上的所有图层，并根据用户选择的图层类型（如 watercolor, toner, terrain）来加载对应的地图图层。
Stamen 提供了不同的图层格式，使用了 XYZ 来源来加载这些图层。我们通过拼接 URL 来动态加载不同的图层：
const StamenMap = (layerType) => {if (!map.value) {console.error('Map is not initialized');return;}// Clear all layersmap.value.getLayers().getArray().forEach((layer) => {if (layer) {map.value.removeLayer(layer);}});const stamenLayer = new Tile({source: new XYZ({url: `https://stamen-tiles.a.ssl.fastly.net/${layerType}/{z}/{x}/{y}.jpg`})});map.value.addLayer(stamenLayer);console.log(`Stamen layer of type ${layerType} added`);
};响应式和生命周期钩子
使用 Vue 3 的 Composition API，我们通过 ref 来创建响应式数据 map。通过 onMounted 生命周期钩子，确保在组件挂载后初始化地图，并默认加载 watercolor 图层。
onMounted(() => {initMap();StamenMap('watercolor');
});3. 页面展示
当你在页面中运行这段代码时，会看到 3 个按钮，分别用来切换到不同的 Stamen 地图图层（Watercolor、Toner 和 Terrain）。用户点击按钮时，地图会根据选择切换不同的图层样式。
三、总结
通过这篇文章，你学习了如何在 Vue 3 项目中使用 OpenLayers 加载 Stamen 地图图层。我们使用了 OpenLayers 提供的 XYZ 图层来源来动态加载 Stamen 地图，结合 Vue 3 的 Composition API 使得代码结构更加简洁、灵活。
文章的关键点：
- 使用
XYZ图层加载 Stamen 地图。 - 动态切换不同的地图图层。
- 通过 Vue 3 的 Composition API 管理地图状态。
你可以根据自己的需求进一步扩展这个功能，比如添加更多地图图层、设置自定义样式、响应用户输入等。
希望这篇文章能对你有所帮助，帮助你更好地理解如何在 Vue 3 中使用 OpenLayers。如果你有任何问题，欢迎在评论区留言讨论！
