I'm using Cesium-Angular. I have one Module which handles all the work with Cesium (camera handling and entities). I have 2 components which use this module, each for its own purpose. each component has its own page. I switch between pages using navbar and routerLink.
The problem is when I switch tab, the control on the camera and the entity container is lost.
Any Idea?
Thanks!
Here is the code of the ngAfterViewInit of the Cesium, module.
ngAfterViewInit(): void {
CesiumComponent.viewer = this.mapsManagerService.getMap().getCesiumViewer();
this.mapEventManager = this.mapsManagerService
.getMap()
.getMapEventsManager();
CesiumComponent.scene = CesiumComponent.viewer.scene;
CesiumComponent.canvas = CesiumComponent.viewer.canvas;
this.cameraService = this.mapsManagerService.getMap().getCameraService();
this.cesiumService = this.mapsManagerService.getMap().getCesiumSerivce();
this.handler = new Cesium.ScreenSpaceEventHandler(
CesiumComponent.viewer.scene.canvas
);
this.handler.setInputAction(function(movement) {
console.log('Moved!!!');
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.setInputAction(function(click) {
if (CesiumComponent.isCreate) {
console.log('clicked!!!!!');
const mousePosition = new Cesium.Cartesian2(click.position.x, click.position.y);
const ellipsoid = CesiumComponent.scene.globe.ellipsoid;
const width = CesiumComponent.canvas.clientWidth;
const height = CesiumComponent.canvas.clientHeight;
const cartesian = CesiumComponent.viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
if (cartesian) {
const cartographic = ellipsoid.cartesianToCartographic(cartesian);
CesiumComponent.longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
CesiumComponent.latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
const altitude = height;
// tslint:disable-next-line:max-line-length
const shape = CesiumComponent.images[CesiumComponent.arrayObjectIndexOf(CesiumComponent.images, CesiumComponent.billboardImage, 'shapeSource')].name;
// .indexOf((x) => x.shapeSource)].name;
if (shape !== undefined) {
CesiumComponent.entitiesForDb.push({position_x: CesiumComponent.latitudeString,
position_y: CesiumComponent.longitudeString,
position_z: altitude,
classification: shape
});
}
CesiumComponent.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
CesiumComponent.longitudeString,
CesiumComponent.latitudeString
),
billboard: {
image: CesiumComponent.billboardImage, // default: undefined
show: true, // default
// pixelOffset : new Cesium.Cartesian2(0, -50), // default: (0, 0)
// eyeOffset : new Cesium.Cdasdsaartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
verticalOrigin: Cesium.VerticalOrigin.BOTTOM // default: CENTER
// scale : 2.0, // default: 1.0
// color : Cesium.Color.LIME, // default: WHITE
// rotation : Cesium.Math.PI_OVER_FOUR, // default: 0.0
// alignedAxis : Cesium.Cartesian3.ZERO, // default
// width : 100, // default: undefined
// height : 25 // default: undefined
}});
}
} }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}