在 Openlayers 中用动画旋转标记

Question

我有这个代码：

this.posFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([-5.7,43.5])),
    name: 'pos'
});
var posStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [10, 10],
        anchorXUnits: 'pixels',
        anchorYUnits: 'pixels',
        src: 'car.svg'
    })
});
this.posFeature.setStyle(posStyle);
this.markerPosSource = new ol.source.Vector({features: [this.posFeature]});
this.layerPos = new ol.layer.Vector({source: this.markerPosSource});
map.addLayer(this.layerPos);

我想用动画旋转图标（旋转）。可能吗？如果没有，如何旋转无动画？

提前致谢！

Answer 1

要旋转它，请使用旋转（注意使用弧度而不是度数）

var posStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [10, 10],
    anchorXUnits: 'pixels',
    anchorYUnits: 'pixels',
    src: 'car.svg', 
    rotation: Math.PI/2
  }) 
});

Answer 2

要平滑地设置旋转动画，请根据每次渲染地图时经过的时间计算所需的旋转，例如每 10 秒完成一次旋转：

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Symbolizer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([0, 0]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });

      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 1],
          src: 'https://openlayers.org/en/v6.4.3/examples/data/icon.png'
        })
      });

      iconFeature.setStyle(iconStyle);

      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      var map = new ol.Map({
        layers: [vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [0, 0],
          zoom: 3
        })
      });

      var startTime = new Date().getTime();

      map.on('rendercomplete', function(e) {
        var elapsedTime = e.frameState.time - startTime;
        var rotation = elapsedTime / 10000 * Math.PI;
        iconStyle.getImage().setRotation(rotation);
        iconFeature.changed();
      });
    </script>
  </body>
</html>

在 Openlayers 中用动画旋转标记

Rotate marker with animation in Openlayers

rotation

openlayers

marker