50.在 Vue3 中使用 OpenLayers 切换图层（引用 Layerswitcher 扩展版）

引言

OpenLayers 是一个强大的开源 JavaScript 库，用于在 Web 页面中显示和处理地图数据。它支持多种地图图层的显示与交互，能够让开发者快速集成各类地图应用。

在许多 Web 地图应用中，切换不同的图层是常见的功能，例如切换底图、叠加图层等。今天，我们将介绍如何在 Vue 3 项目中使用 OpenLayers 来切换图层，并且通过引入 layerswitcher 扩展，增强用户的交互体验。

1. 安装依赖

首先，我们需要安装 Vue 3 和 OpenLayers 的相关依赖。假设你的项目已经使用 Vue 3 初始化，接下来我们需要安装 ol 和 ol-layerswitcher 扩展包。

npm install ol ol-layerswitcher

ol-layerswitcher 是 OpenLayers 的一个扩展，用于在地图上实现图层切换的功能。

2. 创建 Vue 3 组件

在我们的项目中，我们会创建一个 Vue 3 组件来展示地图，并使用 layerswitcher 来切换不同的图层。我们可以通过 XYZ 图层来加载自定义的地图样式（如高德地图、OSM 地图等）。

下面是一个完整的代码示例：

<!--
 * @Author: 彭麒
 * @Date