请写一个Vue3的openLayers增删矢量图层的代码

下面是一个简单的示例代码，演示如何使用Vue3和OpenLayers来增加和删除矢量图层。

<template>
  <div id="map"></div>
</template>

<script>
import { onMounted, ref } from 'vue';
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 Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';

export default {
  setup() {
    const mapRef = ref(null);
    let mapInstance = null;
    let vectorLayer = null;

    const addLayer = () => {
      const source = new VectorSource({
        features: [
          new Feature({
            geometry: new Point(fromLonLat([120.1551, 30.2741])),
          }),
        ],
      });

      const style = new Style({
        image: new CircleStyle({
          radius: 10,
          fill: new Fill({ color: 'red' }),
          stroke: new Stroke({ color: 'white', width: 2 }),
        }),
      });

      vectorLayer = new VectorLayer({
        source,
        style,
      });

      mapInstance.addLayer(vectorLayer);
    };

    const removeLayer = () => {
      mapInstance.removeLayer(vectorLayer);
    };

    onMounted(() => {
      mapInstance = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: fromLonLat([120.1551, 30.2741]),
          zoom: 15,
        }),
      });
    });

    return {
      mapRef,
      addLayer,
      removeLayer,
    };
  },
};
</script>

<style>
#map {
  width: 100%;
  height: 400px;
}
</style>

在这个示例中，我们首先引入了所需的OpenLayers库和Vue3的相关函数。在`setup()`函数中，我们创建了一个`mapRef`引用，用于将地图容器元素绑定到Vue的模板中。然后我们定义了`mapInstance`和`vectorLayer`两个变量，分别用于跟踪地图实例和矢量图层。

接下来，我们定义了`addLayer()`和`removeLayer()`两个函数，分别用于添加和删除矢量图层。在`addLayer()`函数中，我们首先创建了一个`VectorSource`对象，并向其添加了一个包含一个点要素的`Feature`对象。接着，我们定义了一个样式对象`style`，用于渲染矢量图层中的要素。最后，我们创建了一个`VectorLayer`对象，并将其添加到地图实例中。

在`removeLayer()`函数中，我们使用`mapInstance`对象的`removeLayer()`方法，将矢量图层从地图中删除。

在`onMounted()`函数中，我们初始化了地图实例，并将其绑定到`mapRef`引用上。我们还设置了一个初始的地图视图，并添加了一个瓷砖图层。

最后，在模板中，我们使用`id="map"`来创建一个地图容器元素，并在创建地图实例后将其绑定到`mapRef`引用上。我们还添加了两个按钮，用于触发添加和删除矢量图层的函数。