Chcę dodać ruchome strzałki lub animację nakładki w przykładzie Animacja lotów w OpenLayers 6.

Próbowałem wykonać animację ruchu nakładki za pomocą JavaScript setInterval (), ale do tej pory udało mi się tylko animować pojedynczy CiągLinii, również po zakończeniu rysowania linii. Chciałem dodać ruchomą animację podczas rysowania linii, trochę jak śledzenie ścieżki LineString.

Czy ktoś mógłby mi z tym pomóc?

Poniżej znajduje się fragment kodu, w którym próbowałem dodać animację ruchomą:

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

Oto link do migawki przedstawiającej, jak obecnie wygląda moja aplikacja

0
Saumya Srivastava 19 listopad 2019, 18:17
1
Aby użyć ikony w kontekście wektorowym (która wykorzystuje natychmiastowe renderowanie bez obsługi ładowania asynchronicznego), należy ją utworzyć ze wstępnie załadowanego obrazu, na przykład codesandbox.io/s/dynamic-data-3x8ux
 – 
Mike
19 listopad 2019, 18:52
Dodałem zrzut ekranu przedstawiający, jak wygląda teraz moja aplikacja. Udało mi się dodać strzałki do linii, ale tylko na środku linii i nie mogłem dodać do nich animacji ruchu.
 – 
Saumya Srivastava
19 listopad 2019, 18:52
@Mike, Wow... Ta animacja jest naprawdę fajna. I może uda mi się coś z tego wyciągnąć. Daj mi figurę . Dziękuję !
 – 
Saumya Srivastava
19 listopad 2019, 19:02

1 odpowiedź

Śledź swój LineString

Powinno wystarczyć ustawienie centrum mapy na ostatni punkt ciągu linii, jeśli aktualizujesz wystarczająco często

map.getView().setCenter(lastPoint)

Jeśli robi się opóźniony w użyciu

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

Rysuj strzałki

Aby narysować strzałki na swoim LineString, możesz użyć następującego stylu

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

Więcej szczegółów: https://stackoverflow.com/a/58237497/546526

0
megges 19 listopad 2019, 18:37
Cześć megges, dzięki za twój wkład. Mogę dodać strzałki, ale nie mogę przesuwać ich wzdłuż ciągu linii podczas rysowania.
 – 
Saumya Srivastava
19 listopad 2019, 18:47