16.在 Vue 3 中使用 OpenLayers 实现自定义地图缩放控件

前言

在前端开发中，地图交互是一个常见且重要的需求。默认情况下，OpenLayers 提供了丰富的控件（如缩放、旋转、属性标注等），但有时我们需要根据项目需求自定义交互逻辑，比如禁用默认缩放控件并实现自己的按钮式缩放功能。

本文将带大家实现一个自定义地图缩放的功能，通过 Vue 3 的 Composition API 和 OpenLayers 来构建。

技术栈

• Vue 3：前端主流框架，使用 Composition API 实现响应式开发。
• OpenLayers：开源地图库，支持自定义控件和丰富的交互功能。
• CSS：实现控件的样式设计。

效果展示

我们将实现以下功能：

1. 显示一张 OpenStreetMap 地图。
2. 禁用 OpenLayers 的默认缩放控件。
3. 在地图上添加两个按钮，实现自定义的放大和缩小功能。

最终效果如下：

项目初始化

首先，创建一个 Vue 3 项目，并安装必要的依赖：

创建 Vue 项目

# 使用 Vue CLI 创建项目
 npm init vue@latest openlayers-custom-zoom 
cd openlayers-custom-zoom 
npm install

安装 OpenLayers

npm install ol

实现自定义地图缩放功能

接下来，我们通过以下步骤实现所需功能。

完整代码

以下是最终的 Vue 组件代码：

<!--
 * @Author: 彭麒
 * @Date: 2024/12/8
 * @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自定义zoom控件，实现地图放大缩小</div></div>
        <div id="vue-openlayers">
            <div class="zoomin" @click="zoomin">+</div>
            <div class="zoomout" @click="zoomout">-</div>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import {fromLonLat} from 'ol/proj';
import * as control from 'ol/control';
import router from "@/router";
const goBack = () => {
    router.push('/OpenLayers');
};
const map = ref(null);

const initMap = () => {
    map.value = new Map({
        layers: [
            new TileLayer({
                source: new OSM(),
            }),
        ],
        target: 'vue-openlayers',
        view: new View({
            center: fromLonLat([116, 39]),
            projection: 'EPSG:3857',
            zoom: 2,
        }),
        controls: control.defaults({
            zoom: false,
            rotate: false,
            attribution: false,
        }).extend([]),
    });
};

const zoomin = () => {
    const currentZoom = map.value.getView().getZoom();
    map.value.getView().setZoom(currentZoom + 1);
};

const zoomout = () => {
    const currentZoom = map.value.getView().getZoom();
    map.value.getView().setZoom(currentZoom - 1);
};

onMounted(() => {
    initMap();
});
</script>

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

#vue-openlayers {
    width: 800px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #42B983;
    position: relative;
}

#vue-openlayers .zoomin,
#vue-openlayers .zoomout {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    font-size: 20px;
    position: absolute;
    z-index: 2;
    border: 1px solid #000088;
    color: #fff;
    cursor: pointer;
}

#vue-openlayers .zoomout {
    bottom: 50px;
    right: 10px;
}

#vue-openlayers .zoomin {
    bottom: 80px;
    right: 10px;
}
</style>

代码解析

1. 初始化地图

initMap 方法中初始化了 OpenLayers 的 Map 实例，配置了：

• 目标节点：target: 'vue-openlayers'。
• 图层：使用 TileLayer 加载 OSM 瓦片地图。
• 视图：设置地图的中心点、缩放级别及投影坐标系。
• 控件：通过 control.defaults 禁用了默认缩放、旋转和属性标注控件。

2. 自定义缩放按钮

通过两个自定义按钮实现缩放功能：

• 放大按钮 zoomin：获取当前缩放级别后加 1。
• 缩小按钮 zoomout：获取当前缩放级别后减 1。

const currentZoom = map.value.getView().getZoom(); 
map.value.getView().setZoom(currentZoom + 1); // 放大 
map.value.getView().setZoom(currentZoom - 1); // 缩小

3. 自定义样式

通过 CSS 设置按钮的位置和样式，确保按钮美观并固定在地图右下角。

总结

本篇文章展示了如何使用 Vue 3 和 OpenLayers 实现禁用默认缩放控件，并添加自定义缩放按钮的功能。通过 OpenLayers 提供的接口，我们可以轻松地扩展更多的地图交互功能，例如自定义旋转按钮、测距工具等。

如果你觉得本文对你有所帮助，请点赞、收藏，并在评论区交流你的想法！