0

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

我尝试使用 JavaScript setInterval() 进行叠加移动动画，但到目前为止，我只成功地为单个 LineString 设置了动画，这也是在线条完成绘制之后。我想在绘制线条时添加移动动画，有点像追踪 LineString 的路径。

有人可以帮我吗？

以下是我尝试添加移动动画的代码片段：

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

这是我的应用程序现在外观的快照的链接

4

1 回答 1

0

跟踪您的 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

于 2019-11-19T15:37:44.727 回答