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

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">显示/隐藏图层</button>
        <div id="map" class="map"></div>
    </div>
</template>
<script>
// 导入 Vue 相关库
import { onMounted, ref } from "vue";
// 导入 OpenLayers 样式文件
import "ol/ol.css";
// 导入 OpenLayers 相关模块
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Zoom from 'ol/control/Zoom';
export default {
    name: "BaseMap",
    setup() {
        // 使用 ref 创建响应式对象存放地图实例
        const map = ref(null); // 存放地图实例
        // 初始化地图函数
        function initMap() {
            // 创建地图实例
            map.value = new Map({
                target: 'map', // 地图容器的 id
                layers: [ // 图层
                    new TileLayer({ // 使用瓦片渲染方法
                        source: new XYZ({
                            url:'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                            crossOrigin:"anonymous"
                        }) // 图层数据源
                    })
                ],
                view: new View({ // 地图视图
                    projection: "EPSG:4326", // 使用 WGS 84 坐标系
                    center: [114.4, 30.4], // 地图中心点坐标为武汉的经纬度
                    zoom: 12, // 地图初始缩放级别
                }),
                controls: [
                    new Zoom() // 添加缩放控件
                ]
            });
        }
        // 放大地图函数
        function zoomIn() {
            let view = map.value.getView();
            let zoom = view.getZoom();
            view.setZoom(zoom + 1);
        }
        // 缩小地图函数
        function zoomOut() {
            let view = map.value.getView();
            let zoom = view.getZoom();
            view.setZoom(zoom - 1);
        }
        // 显示/隐藏图层函数
        function toggleLayer() {
            let layers = map.value.getLayers(); // 获取图层组
            let layer = layers.getArray()[0]; // 获取第一个图层
            let visible = layer.getVisible(); // 获取图层当前显示状态
            layer.setVisible(!visible); // 设置图层显示状态
        }
        // 在组件挂载完成后执行初始化地图函数
        onMounted(() => {
            initMap();
        });
        // 返回响应式数据和方法
        return {
            map,
            toggleLayer,
            zoomIn,
            zoomOut
        };
    }
};
</script>
<style>
/* 可选的样式 */
.map {
    width: 2000px;
    height: 2000px;
    border: 1px solid #eee;
}
.Bigbutton {
    background-color: red;
}
.Smallbutton {
    background-color: greenyellow;
}
.toggle {
    background-color:skyblue;
}
</style>
（6）作为一个openlayers的初学者，希望我的分享能给各位初学者提供一点帮助