How to create a ring?

CesiumJS
1

Hi,All,
Cesium can create an ellipse. But, there is no method to create a ring. Does it have official way to create a ring. Or, How to create it from scratch?

Thanks,
-Jonathan

2

If you want just a circle, there's an example of an Outline Circle in the Circles and Ellipses Sandcastle example: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Circles%20and%20Ellipses.html&label=Showcases

3

Sorry, what I need is a hollow circle. The APIs, demoed in this showcase, is just able to draw a circle not hollow circle.

4

Well, that's not true. Click on the link above.

5

Hi,
Attachment is what I need. Could you drop me a snipped to show how to draw such hollow circle?

Thanks a lot,

-Jonathan

test.jpg
test.jpg933×614 61.2 KB

6

Well there's 2 ways to do this, one is in the example above. You can do it by just changing the width of the polyline. This might not give the desired results because the line width stays the same regardless of the zoom level.

The other way is to use the polygonHierarchy property of the Cesium.Polygon object. You just have to compute 2 circles with different radii, make the outer one the positions and make the inner one a hole.

require(['Cesium'], function(Cesium) {
    "use strict";

    function createPrimitives(scene, ellipsoid) {
        var primitives = scene.primitives;

        var outerPositions = Cesium.Shapes.computeCircleBoundary(
                ellipsoid,
                ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-82.0, 37.0)),
                300000.0);
        var innerPositions = Cesium.Shapes.computeCircleBoundary(
                ellipsoid,
                ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-82.0, 37.0)),
                200000.0);
        var hierarchy = {
            positions: outerPositions,
            holes: [{
                positions: innerPositions
            }]
        };
        var circle = new Cesium.Polygon({
            polygonHierarchy: hierarchy
        });
        circle.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 0.5);
        primitives.add(circle);

    }

    var viewer = new Cesium.Viewer('cesiumContainer');
    viewer.screenSpaceEventHandler.setInputAction(function(movement) {
        var pickedPrimitive = viewer.scene.pick(movement.endPosition);
        Sandcastle.highlight(pickedPrimitive);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    createPrimitives(viewer.scene, viewer.centralBody.ellipsoid);

    Sandcastle.finishedLoading();
});

7

It worked! Thanks a lot.

A further question. How to draw a half hollow circle? Like attachment.

Thanks,

-Jonathan

fh.jpg