请写一个Vue3的openLayers矢量图层切换代码

以下是一个基本的Vue3组件，用于切换OpenLayers矢量图层：

<template>
  <div class="map-layer-switcher">
    <select v-model="selectedLayer" @change="switchLayer">
      <option v-for="(layer, index) in layers" :key="index" :value="layer">{{ layer.name }}</option>
    </select>
  </div>
</template>

<script>
import { ref } from 'vue';
import { VectorLayer } from 'ol/layer';
import { Vector } from 'ol/source';

export default {
  name: 'MapLayerSwitcher',
  props: {
    map: {
      type: Object,
      required: true,
    },
    layers: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const selectedLayer = ref(props.layers[0]);

    function switchLayer() {
      const layer = selectedLayer.value;
      const olLayer = new VectorLayer({
        source: new Vector({ features: layer.features }),
        style: layer.style,
      });

      props.map.getLayers().forEach((l) => {
        if (l instanceof VectorLayer) {
          props.map.removeLayer(l);
        }
      });

      props.map.addLayer(olLayer);
    }

    return {
      selectedLayer,
      switchLayer,
    };
  },
};
</script>

<style>
.map-layer-switcher select {
  margin: 10px;
  padding: 5px;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  font-size: 16px;
}
</style>

此组件需要传递两个属性：`map` 和 `layers`。

`map` 是一个OpenLayers地图实例，`layers` 是一个包含多个矢量图层的数组。每个图层应该包含一个 `name` 和 `features` 属性，以及一个可选的 `style` 属性。

当用户选择一个图层时，`switchLayer` 函数会创建一个新的OpenLayers矢量图层，并使用选定的图层的 `features` 和 `style` 属性来初始化该图层。然后，它会删除所有旧的矢量图层，并将新图层添加到地图中。

在模板中，我们使用一个下拉菜单来展示可用的图层，并将用户选择的图层绑定到 `selectedLayer` 变量上。当用户选择一个不同的图层时，`switchLayer` 函数将自动调用。