Прогнозировать следующие позиции XY с фактическими и предыдущими позициями - PullRequest
0 голосов
/ 21 сентября 2019

Я использую API, который каждые 30 секунд дает мне JSON со всеми позициями поездов в моем городе.Я фактически делаю код для отображения всех точек на карте и обновляю каждые 30 секунд с помощью библиотеки p5js.

У меня есть идея сохранить последние позиции json и фактическую позицию json, чтобы получить разницу между обеими и вследующие 30 секунд перемещают точку прогрессивно в предсказанную следующую позицию.

Основная идея состоит в том, чтобы точка всегда находилась в движении.Проблема в том, что я не знаю, как реализовать идею, я оставлю свой код выше, чтобы посмотреть, сможете ли вы мне помочь.(Не беспокойтесь о ключах API, я просто зарегистрировал новый только для этого).

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/mappa-mundi@0.0.4" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script>
      var datos;
var datosAnterior;
let count = 4;
var counter = setInterval(timer, 1000);
let myMap;
const mappa = new Mappa('Leaflet');
let canvas;
let trenes = [];
let lat;
let lon;
let latdiff;
let londiff;
const options = {
  lat: -34.7,
  lng: -58.5,
  zoom: 9,
  style: "https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png"
}

function preload() {
  var url = "https://cors-anywhere.herokuapp.com/https://apitransporte.buenosaires.gob.ar/trenes/vehiclePositions?json=1&client_id=6fcc70ef9a9b4eb5a013ef1a89448dae&client_secret=4c8926820bD14AAaBC6A58dEFA398a33";
  setTimeout( function() {
  loadJSON(url, gotData);
  }, 5000);
  setInterval( function() {
  loadJSON(url, gotData);
     }, 30000)
}
 
function gotData(data) {
  if (datos != null){
    datosAnterior = datos;
    datos=data.entity;
    count = 30;
  }else{
  datos=data.entity;
  datosAnterior = datos;
  count = 30;
  }
}
 
function timer(){
  count = count - 1;
  if (count <= 0){
    count = "";
  }
}
 
function setup(){
  canvas = createCanvas(600,600);
   myMap = mappa.tileMap(options); 
   myMap.overlay(canvas);
  
}


function draw(){
  clear();
  if(datos){

   for(let e = 0; e < datos.length; e++){

    lat = datos[e].vehicle.position.latitude;
    lon = datos[e].vehicle.position.longitude;
     
    let tren = myMap.latLngToPixel(lat, lon);
     
     fill(255,0,0);
     
    text(datos[e].vehicle.vehicle.label, tren.x, tren.y+20);
     
    ellipse(tren.x, tren.y, 10, 10);

   }
  }else{
  console.log("No hay datos");
  }
  fill(0,0,0);
  textAlign(CENTER, CENTER);
  textSize(20);
  if (count > 0){
  s = "Actualizando en " + count + " segundos";
  text(s, width/2, height/20);
  fill(0,0,0);
  }

  if (count == 0) {
    count = "";
    s = "";
   text("Cargando...", width/2, height/20);
  }
 fill(255,0,0);
}
    </script>
    
  </body>
</html>
...