How to create dashed circle outline?

CesiumJS
1

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.

2 
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);
3

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?

4

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
5

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

6

Hey, guys!
That works fine, but i’ve got a question:

How to put rendered circle into specific coordinates?
Solution provided by kasatik renders circuit on north pole, but i want it somewhere else, so i’ve changed it like this:

(x, y and z are provided by pickPosition() method)

let point =  new Cesium.Cartesian3(
            radius * Math.cos(radians) + x0,
            radius * Math.sin(radians) + y0,
            z0 
        );

After that my circuit is where I want it to be, but there is something wrong with x coordinate and it is not perfectly rounded but looks like egg.