请写一个Vue3的openLayers增删矢量图层的代码，并且为了方便管理，请把图层放在一个键值对数组中保存，可以通过图层的名称获取该图层

以下是一个基本的Vue3和OpenLayers的示例代码，包括添加和删除矢量图层，并将它们保存在一个键值对数组中。你可以通过图层名称来获取该图层。

<!--index.html-->
<template>
  <div id="map"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';

export default {
  name: 'App',
  setup() {
    const mapRef = ref(null);
    let map = null;
    let vectorLayers = {};

    function addVectorLayer(layerName) {
      const vectorSource = new VectorSource();
      const vectorLayer = new VectorLayer({
        source: vectorSource,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)',
          }),
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2,
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33',
            }),
          }),
        }),
      });
      vectorLayers[layerName] = vectorLayer;
      map.addLayer(vectorLayer);
    }

    function removeVectorLayer(layerName) {
      if (vectorLayers[layerName]) {
        map.removeLayer(vectorLayers[layerName]);
        delete vectorLayers[layerName];
      }
    }

    function initMap() {
      map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: fromLonLat([120.1551, 30.2741]),
          zoom: 10,
        }),
      });
    }

    onMounted(() => {
      initMap();
      addVectorLayer('layer1');
      addVectorLayer('layer2');
    });

    return { mapRef, addVectorLayer, removeVectorLayer };
  },
};
</script>

<style>
#map {
  height: 500px;
}
</style>

代码解释：

- `addVectorLayer` 函数将新创建的矢量图层添加到地图中，并将其存储在 `vectorLayers` 对象中，以便稍后可以通过图层名称进行检索。
- `removeVectorLayer` 函数从地图中删除具有给定名称的矢量图层，并从 `vectorLayers` 对象中删除该图层。
- 在 `onMounted` 钩子中，我们初始化了地图，并添加了两个矢量图层，分别命名为 `layer1` 和 `layer2`。

使用 `addVectorLayer` 和 `removeVectorLayer` 函数：

<template>
  <div id="map"></div>
  <button @click="addVectorLayer('layer3')">Add Layer 3</button>
  <button @click="removeVectorLayer('layer2')">Remove Layer 2</button>
</template>

在这个示例中，我们添加了两个按钮，一个用于添加一个名为 `layer3` 的新图层，另一个用于删除具有名称 `layer2` 的图层。