Change the polyline position according to time, and the result is not smooth.

CesiumJS
1

1. A concise explanation of the problem you're experiencing.
Hello, I have a problem. Can anyone help me?
There is a car that runs over time. In the viewer.clock.onTick method, I get the location of the car according to the current time. The location is then set to polyline. The polyline position changed but the effect was not smooth.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

        var radar = viewer.entities.add({
            id: "radar",
            name: 'radar polyline',
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(
                    [0, 0, 0,
                      0, 0, 1000]
                ),
                width: 3,
                material: new Cesium.PolylineOutlineMaterialProperty({
                    color: Cesium.Color.fromCssColorString('#00FF00'),
                    outlineWidth: 0,
                })
            }
        });

        var oldloclon = 0;
        var oldloclat = 0;
        viewer.clock.onTick.addEventListener(function (clock) {
            var loc = position.getValue(clock.currentTime);
            var loc1 = Cesium.Cartographic.fromCartesian(loc);
            var loclon = Cesium.Math.toDegrees(loc1.longitude).toFixed(5);
            var loclat = Cesium.Math.toDegrees(loc1.latitude).toFixed(5);
            if (oldloclon != loclon || oldloclat != loclat) {
                //console.log(loclon + "**********" + loclat);
                //var et = viewer.entities.getById("radar");
                //if (et != null) {
                // viewer.entities.remove(et);
                //}
                radar.polyline.positions = Cesium.Cartesian3.fromDegreesArrayHeights(
                    [loclon, loclat, 0,
                        loclon, loclat, 1000]
                );
                oldloclon = loclon;
                oldloclat = loclat;
            }
        });

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want to use polyline to represent a bunch of lasers from the car, and the laser follows the car.

4. The Cesium version you're using, your operating system and browser.

cesium-1.38，Chrome

2

Hi Think,

I believe the jittery effect would be caused by the rounding errors in these lines:

var loclon = Cesium.Math.toDegrees(loc1.longitude).toFixed(5);
var loclat = Cesium.Math.toDegrees(loc1.latitude).toFixed(5);

``

There is no need to covert from Cartesian to Cartographic to Degrees. Instead here’s an example using a callbackProperty

var radar = viewer.entities.add({

id: “radar”,

name: ‘radar polyline’,

polyline: {

// This callback updates positions each frame.

positions : new Cesium.CallbackProperty(function(time, result) {

// Get position

var location = position.getValue(clock.currentTime);

// Convert to Cartographic and make a copy

var position1 = Cesium.Cartographic.fromCartesian(location);

var position2 = Cesium.Cartographic.clone(position1);

// Set heights

position1.height = 0;

position2.height = 1000;

// Assign positions

return [

Cesium.Cartographic.toCartesian(position1),

Cesium.Cartographic.toCartesian(position2)

];

}, isConstant),

width: 3,

material: new Cesium.PolylineOutlineMaterialProperty({

color: Cesium.Color.fromCssColorString(’#00FF00’),

outlineWidth: 0,

})

}

});

``

Hope that helps. Thanks!

Gabby

3

Hello, I have recognized the importance of Cesium.CallbackProperty for animations and my problems have been solved. The reason for using Cesium.Math.toDegrees(loc1.longitude).toFixed(5) is var position1 = Cesium.Cartographic.fromCartesian(position); the resulting position1 is wrong, not latitude and longitude. Do you know why? (position1 = s {longitude: 2.029479169114886, latitude: 0.6979993460280122, height: 0})

4

Hello, I have recognized the importance of Cesium.CallbackProperty for animations and my problems have been solved. The reason for using Cesium.Math.toDegrees(loc1.longitude).toFixed(5) is var position1 = Cesium.Cartographic.fromCartesian(position); the resulting position1 is wrong, not latitude and longitude. Do you know why? (position1 = s {longitude: 2.029479169114886, latitude: 0.6979993460280122, height: 0})

5

Cesium uses Cartesian3 objects to represent positions. They specify your location in space relative to an x, y, and z-axis. Latitude and Longitude are what we call Cartographic positions, and they specify your location on a globe surface.

The position you get from position.getValue(clock.currentTime) is a Cartesian, and the positions assigned to the polyline are also Cartesians, so you don’t to to convert from Cartesian to Cartographic, then back to Cartesian. When you print the Cartesian however, the values won’t be the same.

Hope that helps explain things,

Gabby