在Openlayers中使用动画旋转标记

// 导入Openlayers库文件
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {fromLonLat} from 'ol/proj';
import {Icon, Style} from 'ol/style';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

// 创建地图容器
const mapContainer = document.getElementById('map');

// 初始化地图对象
const map = new Map({
  target: mapContainer,
  view: new View({
    center: fromLonLat([longitude, latitude]), // 设置地图中心点的经纬度坐标
    zoom: 10 // 设置地图缩放级别
  })
});

// 创建标记对象
const marker = new Feature({
  geometry: new Point(fromLonLat([longitude, latitude])) // 设置标记的位置
});

// 创建图标样式对象
const iconStyle = new Style({
  image: new Icon({
    src: 'path/to/icon.png', // 设置图标路径
    size: [width, height], // 设置图标大小
    rotation: rotationAngle // 设置旋转角度
  })
});

// 将图标样式应用到标记对象
marker.setStyle(iconStyle);

// 创建矢量图层和矢量数据源
const vectorSource = new VectorSource({
  features: [marker]
});
const vectorLayer = new VectorLayer({
  source: vectorSource
});

// 将矢量图层添加到地图中
map.addLayer(vectorLayer);

// 使用动画库更新标记对象的旋转角度
function animateMarker() {
  // 更新旋转角度
  rotationAngle += rotationSpeed;
  iconStyle.getImage().setRotation(rotationAngle);
  
  // 请求下一帧动画
  requestAnimationFrame(animateMarker);
}

// 启动动画
animateMarker();