How on earth do I draw a donut?

CesiumJS
1

Hi all,

Sorry for the very newbie question, but for the life of me cant figure out how to draw a Donut. I assume I draw a polygon containing a large circle and a smaller one as a hole, but cant get any further :frowning:

Here is as far as I got:

var donut = viewer.entities.add({
    name : 'A donut',
    polygon : {
        hierarchy : {
            positions : new Cesium.CircleOutlineGeometry({
                          center : Cesium.Cartesian3.fromDegrees(0, 0),
                          radius : 100000.0
                        }),
            holes : [ new Cesium.CircleOutlineGeometry({
                          center : Cesium.Cartesian3.fromDegrees(0, 0),
                          radius : 10000.0
                        })]
        },
        material : Cesium.Color.BLUE.withAlpha(0.5),

    }
});

viewer.zoomTo(viewer.entities);

Could someone please point me in the right direction?

Thanks,

2

Hello,

We actually don’t have a donut type built in. You will have to pass an array of the outer and inner positions of the circle to the polygon type.

You can use EllipseGeometryLibrary.computeEllipsePositions to get the positions though. Here is an example:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var ellipse = Cesium.EllipseGeometryLibrary.computeEllipsePositions({
semiMinorAxis: 500000,
semiMajorAxis: 500000,
rotation: 0,
center: Cesium.Cartesian3.fromDegrees(-100, 34),
granularity: Cesium.Math.RADIANS_PER_DEGREE
}, false, true);
var outerPositions = Cesium.Cartesian3.unpackArray(ellipse.outerPositions);

var ellipse2 = Cesium.EllipseGeometryLibrary.computeEllipsePositions({
semiMinorAxis: 300000,
semiMajorAxis: 300000,
rotation: 0,
center: Cesium.Cartesian3.fromDegrees(-100, 34),
granularity: Cesium.Math.RADIANS_PER_DEGREE
}, false, true);
var innerPositions = Cesium.Cartesian3.unpackArray(ellipse2.outerPositions);

var bluePolygon = viewer.entities.add({
polygon : {
hierarchy : {
positions : outerPositions,
holes : [{
positions : innerPositions
}]
},
material : Cesium.Color.BLUE.withAlpha(0.5)
}
});

viewer.zoomTo(viewer.entities);

``

Best,

Hannah

3

Perfect! Thank you!