简体   繁体   中英

Animated leaflet markers lag behind

I'm building a flight tracking map and I want to have the markers move forward on their last known heading so the aircraft don't just remain in one position until the next update. I have a function that calculates a lat,lon point based on last known heading and speed. I expected some slight jitters as the calculated point would probably never be exactly where the next position report would be but what I'm finding is that as time goes on my function keeps moving the aircraft icon back to a much older position. If I refresh the page I can see where the airplane actually is and it's much further ahead. I'm pretty sure the calculations are correct, it seems like the function is making it's calculations from a lat,lon that never updates, so it keeps calculating the same point. Here's my state handler that updates my array of aircraft and updates the real position of the marker...

function stateHandler(object){
    for (j=0;j<object.length;j++){
        for (i=0; i < AC.length;i++){  
          var match = false;
            if (AC[i].ICAO == object[j].ICAO){
                //flight already exists 
                match = true;
                if (AC[i].LAT != object[j].LAT){ 
                  AC[i] = object[j]; //replace with new data
                  updateMarker(AC[i].LAT,AC[i].LON,AC[i].ICAO,object[j].HDG,object[j].CALL,object[j].iconType);
                  if (object[j].ICAO == fActive){
                  updateActiveLines(object[j].LAT,object[j].LON,object[j].ALT);
                  }
                  break;
                }
              }
        }

and my animation function

function aircraftAnimation(){
  for (i = 0; i < AC.length; i++){
    brng = AC[i].HDG * Math.PI / 180
    d = ((((AC[i].GS * 1.150779) / 60) / 60) /2) //Ground Speed in knots to MPH to minutes, to seconds, to half a second 
    R = 3958.8
    φ1 = AC[i].LAT * Math.PI / 180 //convert to radians
    λ1 = AC[i].LON * Math.PI / 180
    
    const φ2 = Math.asin( Math.sin(φ1)*Math.cos(d/R) + Math.cos(φ1)*Math.sin(d/R)*Math.cos(brng) );
    const λ2 = λ1 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(φ1),Math.cos(d/R)-Math.sin(φ1)*Math.sin(φ2));
    coords = [φ2 * 180 / Math.PI , λ2 * 180 / Math.PI] //convert back to degrees
    
    for (j = 0 ; j < marker.length; j++){
      if (marker[j].id == AC[i].ICAO){
        marker[j].setLatLng(coords)
      }
    }
  }
}

The function interval is set like

var aircraftAnim = window.setInterval(aircraftAnimation, 500);

Turns out the issue was that I was moving the marker based on the aircraft's location which would only allow for a single movement per update when I should have been incrementing off the markers position itself which would result in continuous movement.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM