Wie können Sie den Inhalt einer TextBox auch nach der Aktualisierung speichern? ⇐ JavaScript

[Guest]

Ich bin also ziemlich neu in Javascript und versuche, eine Cäsium-Karte zu erstellen, die über mir fliegende Flugzeuge anzeigt (dies ist eine Vereinfachung, aber alles, was zur Beantwortung benötigt wird). Bisher funktioniert alles, aber ich möchte ein Textfeld in die Beschreibung einfügen, die angezeigt wird, wenn Sie auf eine Entität klicken. Dies funktioniert zwar, das Textfeld speichert den Wert jedoch nicht, nachdem neue Informationen vom Server abgerufen wurden (etwa einmal pro Sekunde). Außerdem wird der Cursor immer vom Textfeld wegbewegt. Hier ist ein Ausschnitt meines Codes:

Code: Select all

var position = Cesium.Cartesian3.fromDegrees(plane.lon, plane.lat, plane.alt_geom);
var heading = Cesium.Math.toRadians(plane.track - 90);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, 0.0, 0.0));

var description = `

Flight${plane.flight}
Type
Altitude${plane.alt_geom} ft
Speed${plane.gs} knots
Track${plane.track}°
Squawk${plane.squawk}
ICAO${plane.hex}
Position age${plane.seen_pos}

`;

Dies wird etwa einmal pro Sekunde ausgeführt, um Geschwindigkeit, Höhe usw. zu aktualisieren.
Gibt es eine Möglichkeit, das Textfeld vom Rest zu trennen? der Beschreibung? Ich habe auch versucht, die Informationen zu speichern und in mein Textfeld einzufügen, aber es hat überhaupt nicht funktioniert.
Danke!
Bearbeiten: Hier ist das ganze Skript

Code: Select all

3D ADS-B Map with Table



html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
display: flex;
width: 100%;
height: 100%;
}
#cesiumContainer {
width: 70%;
height: 100%;
}
#tableContainer {
width: 30%;
height: 100%;
background-color: #f0f0f0;
padding: 10px;
box-sizing: border-box;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}









Flight
Altitude (ft)
Speed (knots)
Track (°)
Squawk
ICAO
Position Age
Age









// Assign your Cesium ion access token
Cesium.Ion.defaultAccessToken = '';

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.animation.container.style.visibility = 'hidden';
viewer.timeline.container.style.visibility = 'hidden';
viewer.forceResize();
var aircraftEntities = {};

function updateAircraft(data) {
var aircraftCount = 0;
var updatedAircraft = new Set();
var tbody = document.getElementById('aircraftTable').querySelector('tbody');

data.aircraft.forEach(function (plane) {
if (plane.seen_pos) {
aircraftCount += 1;
updatedAircraft.add(plane.hex);

var row = document.getElementById(plane.hex);
if (!row) {
row = tbody.insertRow();
row.setAttribute('id', plane.hex);
row.insertCell(0).textContent = plane.flight || 'N/A';
row.insertCell(1).textContent = plane.alt_geom || 'N/A';
row.insertCell(2).textContent = plane.gs || 'N/A';
row.insertCell(3).textContent = plane.track || 'N/A';
row.insertCell(4).textContent = plane.squawk || 'N/A';
row.insertCell(5).textContent = plane.hex || 'N/A';
row.insertCell(6).textContent = plane.seen_pos;
row.insertCell(7).textContent = plane.seen;
} else {
row.cells[0].textContent = plane.flight || 'N/A';
row.cells[1].textContent = plane.alt_geom || 'N/A';
row.cells[2].textContent = plane.gs || 'N/A';
row.cells[3].textContent = plane.track || 'N/A';
row.cells[4].textContent = plane.squawk || 'N/A';
row.cells[5].textContent = plane.hex || 'N/A';
row.cells[6].textContent = plane.seen_pos;
row.cells[7].textContent = plane.seen;
}

if (plane.lat && plane.lon &&  plane.alt_geom) {
var position = Cesium.Cartesian3.fromDegrees(plane.lon, plane.lat, plane.alt_geom);
var heading = Cesium.Math.toRadians(plane.track - 90);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, 0.0, 0.0));

var description = `

Flight${plane.flight}
Type
Altitude${plane.alt_geom} ft
Speed${plane.gs} knots
Track${plane.track}°
Squawk${plane.squawk}
ICAO${plane.hex}
Position age${plane.seen_pos}

`;

if (!aircraftEntities[plane.hex]) {
aircraftEntities[plane.hex] = viewer.entities.add({
id: plane.hex,
position: position,
orientation: orientation,
model: {
uri: '/models/.glb',
scale: 10.0
},
label: {
text: plane.flight,
font: '14pt sans-serif',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -9)
},
description: description
});
} else {
aircraftEntities[plane.hex].position = position;
aircraftEntities[plane.hex].orientation = orientation;
aircraftEntities[plane.hex].description = description;
}
}
}
});

document.title = `(${aircraftCount}) 3D Map`;

for (var id in aircraftEntities) {
if (!updatedAircraft.has(id)) {
viewer.entities.remove(aircraftEntities[id]);
delete aircraftEntities[id];
}
}
}

function fetchADSBBData() {
fetch('/adsb_data')
.then(response => response.json())
.then(data => {
updateAircraft(data);
})
.catch(error => console.error('Error fetching ADS-B data:', error));
}

setInterval(fetchADSBBData, 500);