71.在 Vue 3 中使用 OpenLayers 实现按住 Shift 拖拽、旋转和缩放效果

news2025/1/27 23:18:55

前言

在前端开发中，地图功能是一个常见的需求。OpenLayers 是一个强大的开源地图库，支持多种地图源和交互操作。本文将介绍如何在 Vue 3 中集成 OpenLayers，并实现按住 Shift 键拖拽、旋转和缩放地图的效果。

实现效果

按住 Shift 键，拖动鼠标可以旋转地图。
按住 Shift 键，滚动鼠标滚轮可以缩放地图。
支持加载多种地图样式（如街道图、卫星图等）。

环境准备

在开始之前，请确保你的开发环境中已经安装了以下依赖：

Vue 3
OpenLayers

可以通过以下命令安装 OpenLayers：

npm install ol

代码实现

1. 创建 Vue 3 组件

首先，创建一个 Vue 3 组件，用于渲染地图并实现交互功能。

<!--
 * @Author: 彭麒
 * @Date: 2024/1/25
 * @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按住Shift实现拖拽旋转放缩效果</div>
        </div>
        <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 TileJSON from 'ol/source/TileJSON';
import {DragRotateAndZoom, defaults as defaultInteractions} from 'ol/interaction';

const map = ref(null);

const maptiler = (data) => {
    // 清除所有layer
    map.value.getLayers().getArray().forEach((layer) => {
        if (layer) {
            map.value.removeLayer(layer);
        }
    });
    let url = 'https://api.maptiler.com/maps/' + data + '/tiles.json?key=RbTrJIUQMw0c6xtn6kZr';
    let source = new TileJSON({
        url: url,
        tileSize: 512,
        crossOrigin: 'anonymous',
    });

    let maptilerMap = new Tile({
        source: 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 DragRotateAndZoom()]),
    });
};

onMounted(() => {
    initMap();
    maptiler('streets');
});
</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;
}
</style>

2. 代码解析

2.1 地图初始化

在 initMap 函数中，我们创建了一个 OpenLayers 地图实例，并将其绑定到 #vue-openlayers 容器中。地图的初始视图中心设置为 [13247019.404399557, 4721671.572580107]，缩放级别为 3。

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

2.2 拖拽、旋转和缩放交互

通过 DragRotateAndZoom 交互，用户可以在按住 Shift 键的同时进行地图的拖拽、旋转和缩放操作。

interactions: defaultInteractions().extend([new DragRotateAndZoom()]),

2.3 加载地图图层

maptiler 函数用于加载地图图层。它首先清除现有的所有图层，然后根据传入的参数加载新的地图图层。这里使用了 MapTiler 提供的地图服务。

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

2.4 组件挂载后初始化地图

在 onMounted 钩子函数中，调用 initMap 和 maptiler 函数，初始化地图并加载 streets 图层。

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

3. 运行效果

运行项目后，你将看到一个地图显示在页面上。按住 Shift 键并拖动鼠标可以旋转地图，滚动鼠标滚轮可以缩放地图。

注意事项

MapTiler API Key：在使用 MapTiler 的地图服务时，需要替换代码中的 YOUR_MAPTILER_API_KEY 为你自己的 API Key。你可以在 MapTiler 官网注册并获取 API Key。
OpenLayers 版本：确保安装的 OpenLayers 版本与代码兼容。
跨域问题：如果地图无法加载，请检查浏览器的控制台是否有跨域错误。