69.在 Vue 3 中使用 OpenLayers 拖拽实现放大区域的效果（DragPan）

news2025/10/31 5:05:02

引言

在现代 Web 开发中，地图功能已经成为许多应用的重要组成部分。OpenLayers 是一个功能强大的开源地图库，支持多种地图源和交互操作。Vue 3 是一个流行的前端框架，以其响应式数据和组件化开发著称。本文将介绍如何在 Vue 3 中集成 OpenLayers，并实现拖拽放大区域的效果（DragPan）。

实现效果

按住 Shift 键，使用鼠标左键圈选区域，地图会自动放大到选中的区域。
支持地图的拖拽、缩放等基本操作。
使用 MapTiler 提供的地图服务作为底图。

环境准备

在开始之前，请确保你已经安装了以下工具和库：

Node.js 和 npm
Vue 3 项目（可以通过 vue-cli 或 Vite 创建）
OpenLayers 库

安装 OpenLayers

在项目中安装 OpenLayers：

npm install ol

实现步骤

1. 创建 Vue 3 组件

首先，创建一个 Vue 3 组件，用于承载地图和实现拖拽放大功能。

<!--
 * @Author: 彭麒
 * @Date: 2025/1/24
 * @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拖拽实现放大区域的效果（DragPan）</div>
    </div>
    <div class="title">操作说明：按住shift,使用鼠标左键进行圈选</div>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { ref, onMounted } from 'vue';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import TileJSON from 'ol/source/TileJSON';
import { DragPan, defaults as defaultInteractions } from 'ol/interaction';

export default {
  setup() {
    const map = ref(null);

    const maptiler = (data) => {
      if (map.value) {
        // 清除所有 layer
        map.value.getLayers().getArray().forEach((layer) => {
          if (layer) {
            map.value.removeLayer(layer);
          }
        });

        const url = `https://api.maptiler.com/maps/${data}/tiles.json?key=RbTrJIUQMw0c6xtn6kZr`;
        const source = new TileJSON({
          url,
          tileSize: 512,
          crossOrigin: 'anonymous',
        });

        const maptilerMap = new Tile({
          source,
        });

        map.value.addLayer(maptilerMap);
      }
    };

    const initMap = () => {
      map.value = new Map({
        target: 'vue-openlayers',
        layers: [],
        view: new View({
          center: [13247019.404399557, 4721671.572580107],
          zoom: 3,
        }),
        interactions: defaultInteractions().extend([new DragPan()]),
      });
    };

    onMounted(() => {
      initMap();
      maptiler('topographique');
    });

    return {
      map,
    };
  },
};
</script>

<style scoped>
.container {
  width: 840px;
  height: 590px;
  margin: 50px auto;
  border: 1px solid #42B983;
}

#vue-openlayers {
  width: 800px;
  height: 470px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
.title{
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: red;
}
</style>

2. 代码解析

2.1 模板部分

<div id="vue-openlayers">: 这是地图的容器，OpenLayers 会将地图渲染到这个 DOM 元素中。
操作说明: 提示用户如何操作地图（按住 Shift 键并使用鼠标左键圈选区域）。

2.2 脚本部分

引入依赖:
- ol/ol.css: OpenLayers 的样式文件。
- ref, onMounted: Vue 3 的 Composition API 函数。
- Map, View: OpenLayers 的核心类，用于创建地图和视图。
- Tile, TileJSON: OpenLayers 的图层和数据源类。
- DragPan, defaultInteractions: OpenLayers 的交互功能，用于实现地图拖拽。
setup 函数:
- map: 使用 ref 创建一个响应式的地图对象。
- maptiler 函数: 用于加载 MapTiler 提供的地图服务。它会清除当前地图的所有图层，并根据传入的 data 参数加载新的地图图层。
- initMap 函数: 初始化 OpenLayers 地图，设置目标容器、视图中心、缩放级别，并添加拖拽交互。
- onMounted 钩子: 在组件挂载后调用 initMap 和 maptiler 函数，初始化地图并加载默认的 MapTiler 地图。