Slow draw sphere/circle performance

CesiumJS
1

I’m adding drawing rectangle and sphere entities by mouse. I’ve already implemented rectangle, which works fine. Similarly, I implemented a sphere (later simplified to an ellipse), but the drawing performance isn’t satisfying. When moving the mouse, the ellipsoid can’t be redrawn efficiently.

Here is a sandcastle example.

After opening the sandcastle example, click and hold mouse button, then move it while holding. Why its performance is slow? Any way to try or improve it?
Refresh or re-run the example if you need retrying
Bonus: On sandcastle, I’m also getting an exception at the complete event, don’t know why.

2

Okay after having a short break, I read my code again and asked myself ‘why there are no CallbackProperty used in move handler’
Appearently, I was updating the entity in an inefficient way.

So the fix is:
When creating the entity, use CallbackProperty() :

...
const radiusCallback = new Cesium.CallbackProperty(() => {
    return this._radiusMeters;
}, false);
...
semiMajorAxis: radiusCallback,
semiMinorAxis: radiusCallback,

Then in the move handler, update the CallbackProperty:

...
this._radiusMeters = Cesium.Cartesian3.distance(centerFlat, currentFlat);

This is the result:

3 Likes