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

前言

在前端开发中，地图功能是一个常见的需求。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) => {// 清除所有layermap.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 版本与代码兼容。
跨域问题：如果地图无法加载，请检查浏览器的控制台是否有跨域错误。