How to use the angular-cesium.AcEntity function in angular-cesium

setTimeout(() => {

        // add point 1
        this.updater.next({
          id: packet1.id,
          entity: new AcEntity(packet1),
          actionType: ActionType.ADD_UPDATE
        });

      }, 6000);

setTimeout(() => {

        // changing the initial packet2
        packet2.point.color.rgba = [0, 0, 255, 200];

        this.updater.next({
          id: packet2.id,
          entity: new AcEntity(packet2),
          actionType: ActionType.ADD_UPDATE
        });

      }, 5000);

setTimeout(() => {

        // providing an object that only contains the diff
        const updatePoint2 = {
          id: 'point_2',
          point: {
            outlineColor: {
              rgba: [0, 0, 255, 200]
            }
          }
        };

        this.updater.next({
          id: updatePoint2.id,
          entity: new AcEntity(updatePoint2),
          actionType: ActionType.ADD_UPDATE
        });

        this.zoomOnDataSource();
      }, 11000);

this.czmlPackets$ = new Observable(observer => {
      this.updater = observer;

      // Attention, first packet needs to be a document
      // Example: https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Point%20-%20Time%20Dynamic.html&label=CZML
      this.updater.next({
        id: document.id,
        entity: new AcEntity(document),
        actionType: ActionType.ADD_UPDATE
      });

      // add point 1
      this.updater.next({
        id: packet1.id,
        entity: new AcEntity(packet1),
        actionType: ActionType.ADD_UPDATE
      });

      // add point 2
      this.updater.next({
        id: packet2.id,
        entity: new AcEntity(packet2),
        actionType: ActionType.ADD_UPDATE
      });

ngOnInit() {
    const entX: any = new AcEntity({
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        -115.0, 37.0,
        -115.0, 32.0,
        -107.0, 33.0,
        -102.0, 31.0,
        -102.0, 35.0]),
      outline: true,
      outlineColor: Cesium.Color.BLUE,
      fill: true,
      perPositionHeight: true,
      material: Cesium.Color.TRANSPARENT,
    });

    const entY: any = new AcEntity({
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        -108.0, 42.0,

ngOnInit() {
    const entX: any = new AcEntity({
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        -115.0, 37.0,
        -115.0, 32.0,
        -107.0, 33.0,
        -102.0, 31.0,
        -102.0, 35.0]),
      outline: true,
      outlineColor: Cesium.Color.BLUE,
      fill: true,
      perPositionHeight: true,
      material: Cesium.Color.TRANSPARENT,
    });

    const entY: any = new AcEntity({
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        -108.0, 42.0,
        -100.0, 42.0,
        -104.0, 40.0,
      ]),
      outline: true,
      outlineColor: Cesium.Color.BLUE,
      fill: true,
      perPositionHeight: true,
      material: Cesium.Color.TRANSPARENT,

    });
    this.polygons$ = observableFrom([
      {
        id: '0',
        entity: new AcEntity({

entity: new AcEntity({
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([-108.0, 25.0, 100000,
            -100.0, 25.0, 100000,
            -100.0, 30.0, 100000,
            -108.0, 30.0, 300000]),
          extrudedHeight: 0,
          perPositionHeight: true,
          material: Cesium.Color.ORANGE.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK
        }),
        actionType: ActionType.ADD_UPDATE
      },
      {
        id: '1',
        entity: new AcEntity({
            hierarchy: {
              positions: Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0,
                -85.0, 30.0,
                -85.0, 40.0,
                -99.0, 40.0]),
              holes: [{
                positions: Cesium.Cartesian3.fromDegreesArray([
                  -97.0, 31.0,
                  -97.0, 39.0,
                  -87.0, 39.0,
                  -87.0, 31.0
                ]),
                holes: [{
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    -95.0, 33.0,
                    -89.0, 33.0,

show: rectangle.show
        }">
          
      


  `,
})
export class RectangleLayerExampleComponent implements OnInit {
  @ViewChild(AcLayerComponent, { static: false }) layer: AcLayerComponent;

  rectangles$: Observable;
  show = true;
  initialValue = {
    id: '0',
    entity: new AcEntity({
      coordinates: new Cesium.Rectangle(
        -1.88496,
        0.436332,
        -1.74533,
        0.523599
      ),
      extrudedHeight: 0,
      height: 0,
      material: Cesium.Color.ORANGE.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.BLACK
    }),
    actionType: ActionType.ADD_UPDATE
  };
  updater = new BehaviorSubject(this.initialValue);

this.treesAndBoxes.map((tree, i) => ({
      id: i.toString(),
      actionType: ActionType.ADD_UPDATE,
      entity: new AcEntity(tree),
    })).forEach((treeNotification) => this.treesAndBoxes$.next(treeNotification));
  }

providers: [TracksDataProvider]
})
export class LayerOrderComponent implements OnInit {

  Cesium = Cesium;
  simTracks1$: Observable = observableOf({
    id: '1',
    actionType: ActionType.ADD_UPDATE,
    entity: new AcEntity({
      position: Cesium.Cartesian3.fromDegrees(-90, 40),
    })
  });
  simTracks2$: Observable = observableOf({
    id: '2',
    actionType: ActionType.ADD_UPDATE,
    entity: new AcEntity({
      position: Cesium.Cartesian3.fromDegrees(-90, 40),
    })
  });

  polygons$: Observable = observableOf({
    id: '30',
    entity: new AcEntity({
      hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([-90, 40, 0,
        -100.0, 25.0, 0,
        -100.0, 30.0, 0,
        -108.0, 30.0, 0]),
      perPositionHeight: false,
      material: Cesium.Color.ORANGE,
      outline: true,
      outlineColor: Cesium.Color.BLACK,
    }),