How can I change radius in CircleGeometry

CesiumJS
1

I have draw a lot of circle ,but I can not set a new radius to change it

let id= primitive.geometryInstances[j].id;
let attributes=primitive.getGeometryInstanceAttributes(id);
attributes.boundingSphere.radius=newRadius;

but it didn’t work

2

Hi @Mirror-Yu,

Modifying the boundingSphere is probably not what you want to do. The bounding sphere only identifies where the shape is located, but does not control the shape itself.

A CircleGeometry is an EllipseGeometry under the hood, so it’s possible you might have to modify the semiMinorAxis and semiMajorAxis. Here is a Sandcastle example demonstrating how to change the radius after the circle is already constructed.

My example was constructing the circles using the Entity API. How are you constructing your circles? Can you share a working code example as a Sandcastle link?

3

Hi @jjhembd,

Thank you for your reply.
I have draw a lot of circle，and when I click the button I want to set a new radius to change it, but it didn’t work.

Here is a Sandcastle example.

4

Hi @Mirror-Yu, can you explain why you want to change the radius? Then I might be able to suggest a better solution.

Your example is using the Primitive API, which is fast but harder to work with. If you want the circles to change dynamically, the Entity API would be easier. See my Sandcastle example.

Have you already tried using Entities?

5

Hi, @jjhembd ,

Thank you for your reply.

I get the data and use the circle to render it on the map.Then I can modify it radius with a slider.The data maybe have about 1,000 circles，so I used Primitive API.

I have tried using Entities and it worked，But when I set a new radius to change it, the browser gets stuck.

Thanks again for your reply.

6

Thanks for the clarification @Mirror-Yu!

Have you considered PointPrimitives? These render as circles, and you can quickly change the pixelSize property on the fly.

I tried rendering 2,000 circles as a PointPrimitiveCollection. On my computer, the slider for the circle radius responds quickly. See this Sandcastle link.

7

Hi @jjhembd ,

Thank you very much for your reply.
I have tried using PointPrimitives and it worked，But one problem is that it can’t be measured in meters.Because my slider is in meters.

Can you give me some advice.

8

Hi @Mirror-Yu, one option would be to use Camera.getPixelSize to get the conversion between pixels and meters.

Here is a Sandcastle link demonstrating this approach. The circles have a fixed size in meters relative to the globe. Adjusting the size is still fast with the slider.

However, these circles are still drawn in screen-space. They are not actually draped on the globe, as you will see when you tilt the camera.

If your circles must be draped on the terrain, then they need to be geometry buffers in the GPU, with many points defining each shape in 3D. In that case, changing the size would mean re-computing the geometry and re-uploading it to the GPU, which will always be slow even if you were able to hack it into the Primitive API.

1 Like
9

Hi @jjhembd ,

Thank you very much for your reply and example. Now my problem is solved. Thank you for explaining why I need to do this。