Я использую 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>