How to create dashed circle outline?

Hello,

I already spent a lot of hours on this simple task.

I want to make a circle which the:

Fill: false
Outline: true.

Ok, so i only want to see an outline of a circle.
But the outline need to be dashed!!!

How to do this? Pleae help!

Thanks in advance.

var viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
var entities = viewer.entities;

var stripeMaterial = new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.WHITE.withAlpha(0),
  oddColor: Cesium.Color.BLUE.withAlpha(1),
  repeat: 30.0,
});



entities.add({
  position: Cesium.Cartesian3.fromDegrees(-72.0, 25.0),
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 250000.0,
    outline: true,
    outlineColor: Cesium.Color.RED,
    height: 1000,
    stRotation: Cesium.Math.toRadians(50.0),
    material: stripeMaterial,
  },
});


viewer.zoomTo(viewer.entities);

Hello Konstantin,

First, thank you very much for your answer.

But maybe i didnt explain myself correctly.
Your answer is not exactly what i meant.

I tried to upload an image, but the upload failed.
So this what i mean:

Or,

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50%" cy="50%" r="5%" stroke-dasharray="10 10" fill="none" stroke="blue" stroke-width="3"/>

So again, just the outline need to be dashed.
Is it possible in Cesium?

What else came to my mind
var viewer = new Cesium.Viewer(“cesiumContainer”);

    var redLine = viewer.entities.add({
      name: "Red dashed line",
      polyline: {
        positions: computeCircle(1000000),
        width: 5,
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.RED,
        }),
      },
    });

    function computeCircle(radius) {
      var positions = [];
      for (var i = 0; i < 360; i++) {
        var radians = Cesium.Math.toRadians(i);
        let point =  new Cesium.Cartesian3(
            radius * Math.cos(radians),
            radius * Math.sin(radians),
            6371000 
        );
        positions.push(point);
      }
      return positions;
    }

    viewer.zoomTo(viewer.entities);
1 Like

I tried it now, it works! thank you very much Konstantin!