关于ol6中的postcompose -如何在每次渲染时在画布上绘制

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 { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
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);

// 创建一个动态移动的点
let pointFeature = new Feature({
  geometry: new Point([0, 0])
});
pointFeature.setStyle(new Style({
  image: new Icon({
    src: 'path/to/icon.png'
  })
}));
vectorSource.addFeature(pointFeature);

// 更新点的位置
let x = 0;
let y = 0;
setInterval(() => {
  x += 0.01;
  y += 0.01;
  pointFeature.getGeometry().setCoordinates([x, y]);
}, 100);

// 使用 postcompose 事件在每次渲染后更新点的位置
map.on('postcompose', (event) => {
  const vectorContext = event.vectorContext;
  vectorContext.drawFeature(pointFeature);
});