103.在 Vue 3 中使用 OpenLayers 控制图层来显示/隐藏地图

前言

在 WebGIS 开发中，OpenLayers 是一个强大的开源库，可以用于构建各种地理信息系统应用。在 Vue 3 中，我们可以结合 OpenLayers 来实现交互式地图，并通过 setVisible 方法控制地图图层的显示与隐藏。

本文将详细介绍如何在 Vue 3 组合式 API (Composition API) 中集成 OpenLayers，并实现按钮控制地图的显示/隐藏功能。

一、项目环境

在开始之前，确保你已经搭建了 Vue 3 项目，并安装了 Element Plus 组件库（用于按钮 UI）。如果还没有 Vue 3 项目，可以使用 Vite 快速创建：

# 创建 Vue 3 项目 
npm create vite@latest vue-openlayers --template vue 
# 进入项目目录 
cd vue-openlayers 
# 安装依赖 
npm install 
# 安装 OpenLayers 
npm install ol 
# 安装 Element Plus 
npm install element-plus

安装完成后，即可开始编写代码。

二、创建 Vue 组件并集成 OpenLayers

1.