Update Real time polyline

CesiumJS
1

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>
    );
2

This example may help you Drawing on Terrain - Cesium Sandcastle

1 Like