在Openlayers中旋转带有动画的标记

问题描述

我有此代码：

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);

我想用动画旋转图标（旋转）。可能吗？如果没有，如何在没有动画的情况下旋转？

谢谢！

解决方法

要平滑地对旋转进行动画处理，请在每次渲染地图时根据经过的时间计算所需的旋转，例如每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>

要旋转，请使用旋转（NB使用弧度而不是度）

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
  }) 
});

marker openlayers rotation

在Openlayers中旋转带有动画的标记

问题描述

解决方法

相关问答