vue3-Openlayers:根据模板中的属性动态更改特征颜色

<template>
  <div>
    <div ref="map" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { MapContainer, TileLayer, VectorLayer, Feature } from 'vue3-Openlayers';

export default {
  name: 'MapComponent',
  components: {
    MapContainer,
    TileLayer,
    VectorLayer,
    Feature,
  },
  setup() {
    const map = ref(null);
    const featureColor = ref('blue');

    onMounted(() => {
      // 初始化地图
      const mapInstance = map.value.olMap;
      // 添加瓦片图层
      const tileLayer = new TileLayer({
        source: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      });
      mapInstance.addLayer(tileLayer);

      // 创建特征
      const feature = new Feature({
        geometry: new Point([0, 0]),
        color: featureColor.value,
      });

      // 创建特征图层
      const vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [feature],
        }),
      });
      mapInstance.addLayer(vectorLayer);
    });

    // 点击按钮时更改特征颜色
    const changeColor = () => {
      featureColor.value = 'red';
    };

    return {
      map,
      featureColor,
      changeColor,
    };
  },
};
</script>