使用OpenLayers，如何在单个层上显示不同功能的不同图标？

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
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 { Style, Icon } from 'ol/style';

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
});
map.addLayer(vectorLayer);

const styleFunction = (feature) => {
  const type = feature.get('type');
  let iconUrl;
  switch (type) {
    case 'Type1':
      iconUrl = 'path/to/icon1.png';
      break;
    case 'Type2':
      iconUrl = 'path/to/icon2.png';
      break;
    default:
      iconUrl = 'path/to/default-icon.png';
  }

  return new Style({
    image: new Icon({
      anchor: [0.5, 1],
      src: iconUrl
    })
  });
};

vectorLayer.setStyle(styleFunction);

const feature1 = new Feature({
  geometry: new Point([0, 0]),
  type: 'Type1'
});

const feature2 = new Feature({
  geometry: new Point([1000000, 1000000]),
  type: 'Type2'
});

vectorSource.addFeature(feature1);
vectorSource.addFeature(feature2);