自学内容网 自学内容网

10.在 Vue 3 中使用 OpenLayers 加载引用 Stamen 地图(多种形式)

在 Web 地图开发中,OpenLayers 是一个非常强大且灵活的 JavaScript 库,它可以帮助我们加载各种地图层(如 OpenStreetMap、Google Maps、Bing Maps 等)。而 Stamen 地图是一个非常常见的地图样式,它提供了多种地图样式,如 Watercolor、Toner、Terrain 等,适用于不同的开发需求。

本文将详细讲解如何在 Vue 3 中结合 OpenLayers 来加载和切换 Stamen 地图图层,帮助你在自己的项目中快速实现这一功能。

一、项目依赖安装

在开始编写代码之前,我们首先需要安装必要的依赖项。在你的 Vue 3 项目中,运行以下命令来安装 openlayerselement-plus(用于展示按钮的 UI 框架)。

npm install ol npm install element-plus
  • ol 是 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 layers
  map.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. 代码解析

MapView 的初始化

首先,我们通过 MapView 对象来初始化 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 layers
  map.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。如果你有任何问题,欢迎在评论区留言讨论!


原文地址:https://blog.csdn.net/Miller777_/article/details/144259473

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!