Description:
I am trying to use angular-cesium to draw geometric shapes on a cesium globe by calling the api methods and passing coordinates. I have successful implementations for drawing points, lines, rectangles, and polygons on the globe, but my problem comes in when drawing circles and ellipses.
Intended outcome:
My intended outcome is to use the CirclesEditorService and EllipseEditorService to draw circles and ellipses on the globe by calling their corresponding edit method and passing in coordinates to plot on the globe.
Actual outcome:
When I try to draw a circle using the api and passing in coordinates, the center of the circle gets plotted but the drawing on the globe does not show the radius. If I then try to do anything else on the globe, the globe appears to crash. The same thing occurs with ellipses.
Upon investigation, it seems that the returned object that Cesium was using to plot on the globe, did not have a valid ‘radius’ or ‘radiusPoints’ property values. The values for radius and radius points were all ‘NaN’ and I assume that this is what was making the cesium globe crash. Though I do not understand why this object was being returned with a radius of NaN, whether it’s a bug in the api or it’s something that I am doing wrong. And if I can receive some help to determine that, that would be appreciated.
How to reproduce the issue:
Attempt to draw a circle or ellipse on the globe by using the CircleEditorService or EllipseEditorService edit methods, passing it coordinate locations to plot.
@Component({
selector: 'app-visualizer-drawing-toolbar',
templateUrl: './visualizer-drawing-toolbar.component.html',
styleUrls: ['./visualizer-drawing-toolbar.component.scss'],
providers: [
CirclesEditorService
],
})
export class VisualizerDrawingToolbarComponent {
constructor(private _circlesEditor: CirclesEditorService) {}
/**
* draws a circle on the globe based on passed coordinates
*/
public drawCircleWithCoordinates(cart3: Cartesian3, rad) {
const tmp = this._circlesEditor.edit(cart3, rad); // I also tried passing a number directly into the .edit api method but got the same result
tmp.subscribe(result => {
console.log(result); // The result object has a radius value of ‘NaN’ as mentioned above.
if (result.radius) {
// do stuff
}
});
}
}
Description: I am trying to use angular-cesium to draw geometric shapes on a cesium globe by calling the api methods and passing coordinates. I have successful implementations for drawing points, lines, rectangles, and polygons on the globe, but my problem comes in when drawing circles and ellipses.
Intended outcome:
My intended outcome is to use the CirclesEditorService and EllipseEditorService to draw circles and ellipses on the globe by calling their corresponding
editmethod and passing in coordinates to plot on the globe.Actual outcome:
When I try to draw a circle using the api and passing in coordinates, the center of the circle gets plotted but the drawing on the globe does not show the radius. If I then try to do anything else on the globe, the globe appears to crash. The same thing occurs with ellipses.
Upon investigation, it seems that the returned object that Cesium was using to plot on the globe, did not have a valid ‘radius’ or ‘radiusPoints’ property values. The values for radius and radius points were all ‘NaN’ and I assume that this is what was making the cesium globe crash. Though I do not understand why this object was being returned with a radius of NaN, whether it’s a bug in the api or it’s something that I am doing wrong. And if I can receive some help to determine that, that would be appreciated.
How to reproduce the issue:
Attempt to draw a circle or ellipse on the globe by using the CircleEditorService or EllipseEditorService edit methods, passing it coordinate locations to plot.
For the most part i am not doing anything much different than what the documentation says. https://docs.angular-cesium.com/widgets/shape-editors/circle-editor
My Code:
Typescript:
HTML:
Version