OpenLayers 6中在Flight Animation示例中添加箭头或叠加动画

Question

我想在OpenLayers 6的Flights Animation示例中添加移动箭头或叠加动画。

我曾尝试使用JavaScript setInterval（）进行覆盖移动动画，但是到目前为止，我仅成功地对单个LineString进行了动画处理，在线条绘制完成之后也是如此。我想在画线时添加移动动画，有点像跟踪LineString的路径。

我是openlayers的一个完整的初学者，我真的被困在这里。有人可以帮我吗？谢谢！

下面是我试图添加移动动画的代码片段：

var markerEl = document.getElementById('geo-marker');
var marker = new Overlay({
  positioning: 'center-center',
  offset: [0, 0],
  element: markerEl,
  stopEvent: false
});
map.addOverlay(marker);

function animateFlights(event) {
  var coords;
  var vectorContext = getVectorContext(event);
  var frameState = event.frameState;

  var features = flightSource.getFeatures();
  for (var i = 0; i < features.length; i++) {
    var feature = features[i];
    if (!feature.get('finished')) {
      coords = feature.getGeometry().getCoordinates();
      var elapsedTime = frameState.time - feature.get('start');
      var elapsedPoints = elapsedTime * pointsPerMs;

      if (elapsedPoints >= coords.length) {
        feature.set('finished', true);
      }

      var maxIndex = Math.min(elapsedPoints, coords.length);
      var currentLine = new LineString(coords.slice(0, maxIndex));
      vectorContext.setStyle(strokeStyle1);
      vectorContext.drawGeometry(currentLine);

      if (feature.get('finished')) {
        var interval = setInterval(
          function () { return animatePath(coords, interval) }, 10);
      }
    }
  }
  map.render();
}

function animatePath(path, clearInterval) {
  if (i == path.length) {
    stopAnimatePath(clearInterval);
  }
  marker.setPosition(path[i]);
  i = i + 1;
}

function stopAnimatePath(clearInterval) {
  clearInterval(clearInterval);
}

Here is a link to a snapshot of how my app looks right now

Answer 1

跟踪您的LineString

如果您经常更新，将地图中心设置到LineString的最后一点就足够了。>

map.getView().setCenter(lastPoint)
如果不方便使用

var pan = ol.animation.pan({
   source: map.getView().getCenter()
});
map.beforeRender(pan);
map.getView().setCenter(lastPoint);
绘制箭头

要在LineString上绘制箭头，可以使用以下样式

var styleFunction = function (feature) {
    var geometry = feature.getGeometry();
    var styles = [
        // linestring
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#000',
                width: 2
            })
        })
    ];

    geometry.forEachSegment(function (start, end) {
        var dx = end[0] - start[0];
        var dy = end[1] - start[1];
        var rotation = Math.atan2(dy, dx);

        styles.push(new ol.style.Style({
          geometry: new ol.geom.Point(end),
          image: new ol.style.RegularShape({
            fill: new ol.style.Fill({color: '#000'}),
            points: 3,
            radius: 8,
            rotation: -rotation,
            angle: Math.PI / 2 // rotate 90°
          })
        }));
    });

    return styles;
};
更多详细信息：https://stackoverflow.com/a/58237497/546526