OpenLayers Vue.Js中面的每个点的样式

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

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

export default {
  mounted() {
    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    const vectorSource = new VectorSource();
    const vectorLayer = new VectorLayer({
      source: vectorSource,
      style: function(feature) {
        return new Style({
          image: new CircleStyle({
            radius: 6,
            fill: new Fill({ color: 'red' }),
            stroke: new Stroke({ color: 'white', width: 2 })
          })
        });
      }
    });

    map.addLayer(vectorLayer);

    // 添加点要素
    const pointFeature = new Feature({
      geometry: new Point([0, 0])
    });
    vectorSource.addFeature(pointFeature);
  }
}
</script>

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