（三）openlayers引入放大、缩小、隐藏显示图层控件

最新推荐文章于 2025-09-04 19:36:25 发布

原创

最新推荐文章于 2025-09-04 19:36:25 发布 · 1.7k 阅读

标签

#Vue #openlayers #前端

收录于

本文介绍了如何在Vue项目中集成OpenLayers，实现地图的放大、缩小和图层的显示/隐藏控制。通过示例代码展示了如何在BaseMap组件中添加并操作地图控件，对初学者有实用价值。

openlayers引入放大、缩小、隐藏显示图层控件
（1）接着上篇文章，我们在此基础上加入放大、缩小、隐藏显示图层控件，首先在div依次加入三个控件，如图所示：
在这里插入图片描述
（2）在引入相应的功能函数块：

（3）为相应的button的控件加入一个背景颜色，各位可以看自己需求来，我也是初学者，显示的样式代码很简便，如图所示：
在这里插入图片描述
（4）打开终端，输入npm run dev，运行代码块，得到以下显示：

（5）BaseMap.vue代码全部展示如下：

在这里插入代码片
<template>
    <!-- 模板部分，包含一个 id 为 "map" 的地图容器和按钮 -->
    <div>
        <button @click="zoomIn" class="Bigbutton">放大</button>
        <button @click="zoomOut" class="Smallbutton">缩小</button>
        <button @click="toggleLayer" class="toggle">显示/隐藏图