Hi I’m working on drawing the path of a real-time aircraft using resium, which is based on cesium.
It was successful until receiving the location of Entity sent from the server every 0.5 seconds.
However, there is a problem when drawing a polyline.
Every 0.5 seconds, the position of the aircraft received is put in an array in order and put into the positions of PolylineGraphics, but it is blinking.
I even managed to stop it from flickering using CallbackProperty, but after a while, the browser couldn’t stand it and showed performance problems.
(Even if it is only one Polyline)
I want to know what is wrong and what part is wrong. Anyone please help me
thank you
Here is my code
The code that receives 0.5 seconds from the server using a socket and the code below that draws the Entity
if (socket) {
socket.on('status', (data) => {
setVehicles(
vehicles.map(vehicle => {
if (isRunning) {
const newPosition = Cartesian3.fromDegrees(data.position.longitude_deg, data.position.latitude_deg, data.position.absolute_altitude_m);
return vehicle.vehicleName === data.vehicleName ? {
...vehicle, position: data.position , status: data.status, path: [...vehicle.path, newPosition]
} : vehicle
}
return vehicle.vehicleName === data.vehicleName ?
{ ...vehicle, position: data.position, status: data.status} : vehicle})
)
setSaveDroneTrigger((prev) => prev + 1);
});
}
...
const renderPosition = () => {
if (saveDroneTrigger > 0) {
const filter = vehicles.filter((vehicle) => {
return vehicle.position;
});
return filter.map((vehicle) => {
return <div>
<Entity key={vehicle.vehicleName} name={vehicle.vehicleName}
status={vehicle.status.flight_mode}
position={Cartesian3.fromDegrees(vehicle.position.longitude_deg, vehicle.position.latitude_deg, vehicle.position.absolute_altitude_m)}>
<LabelGraphics text={vehicle.vehicleName} font="bold 16px sans-serif"
pixelOffset={new Cesium.Cartesian2(0, -20)}/>
<PointGraphics pixelSize={10}/>
<PolylineGraphics
positions={vehicle.path}
width={10}
material= { new Cesium.PolylineGlowMaterialProperty({glowPower: 0.1, color: Cesium.Color.RED})} />
</Entity>
</div>
}
)}
}
...
return (
<div>
<Viewer full ref={viewerRef} onSelectedEntityChange={handleSelectedEntityChanged}>
{renderPosition()}
</Viewer>
</div>
);