Integrating Angular and Cesium with angular-cesium

<ac-map> component creates your Cesium viewer. Just add it to your app.component.html:

<ac-map></ac-map>

Now try running your app, in the console: npm start or ng serve. Go to localhost:4200 and you should see the Cesium globe.

We’ll create a new component planes-layer.component.html:

<ac-layer acFor="let plane of planes$" [show]="showTracks" [context]="this">
    <ac-billboard-desc props="{
        image: plane.image,
        position: plane.position
    }">
    </ac-billboard-desc>

    <ac-label-desc props="{
        position: plane.position,
        text: plane.name,
        color: getColor(plane)
    }">
    </ac-label-desc>
</ac-layer>

Let’s understand what we did here: we used the Angular template syntax to tell Cesium that each plane will consist of a billboard and a label.

Our plane consists of ac-billboard-desc and ac-label-desc, which are wrapper components for Cesium LabelGraphics and BillboardGraphics, accordingly.

angular-cesium supports all Cesium entities; each component has a -desc suffix, short for description, because the component describes how our plane should look.

Each description component has a props attribute which accepts the same options as the corresponding Cesium class. In our case ac-billboard-desc accepts the same members as Cesium BillboardGraphics. This way you can configure your entities any way you want, like setting position, text, image, or any options you desire.

Layers and ac-layer component

OK, now we have defined what each plane should look like. Next we want to create a list of planes or a layer of planes.

ac-layer represents an array of entities that will be displayed on the map according to the description components. It works with RxJs Observables, meaning it is compatible with the Angular workflow.

Possible attributes:

• acFor accepts a data stream (RxJs Observable) in a “let enityName of observer$” syntax (The $ suffix is a common convention for naming observables).

In our example we accept plane$ observable; ac-layer will subscribe to the observable and will handle all updates for us.

• show show or hide the layer.

Connect to data

Let’s see what planes.component.ts (our component logic) looks like:

@Component({
  selector: 'plane-layer',
  templateUrl: 'plane-layer.component.html',
})

export class PlaneLayerComponent implements OnInit {
  planes$: Observable<AcNotification>;

  constructor(private planesService: PlanesService) {
  }

  ngOnInit() {
    this.planes$ = this.planesService.getPlanes().pipe(
      map(plane => ({
        id: plane.id,
        actionType: ActionType.ADD_UPDATE,
        entity: plane,
      }))
    );
  }

  getColor(plane) {
    if (plane.name.startsWith('Boeing')) {
      return Cesium.Color.Green;
    } else {
      return Cesium.Color.White;
    }
  }
}

// Example mock service

@Injectable({
  providedIn: 'root'
})

export class PlanesService {
  private planes = [
    {
      id: '1',
      position: Cesium.Cartesian3.fromDegrees(30, 30),
      name: 'Airbus a320',
      image: 'https://cdn3.iconfinder.com/data/icons/airport-collection/100/23-512.png'
    },
    {
      id: '2',
      position: Cesium.Cartesian3.fromDegrees(31, 31),
      name: 'Boeing 777',
      image: 'https://cdn1.iconfinder.com/data/icons/fly-airbus-and-aeroplane/154/fly-air-plane-airbus-aeroplane-512.png'
    }
  ];

  getPlanes() {
    // Or get it from a real updating data source
    return Observable.from(this.planes);
  }
}

We learned that you must provide a data source to ac-layer for the [acFor] attribute, and the data source must be an RxJs stream.

The next thing we learn is that every notification on the stream should be of type AcNotification:

interface AcNotification {
    id: string;
    actionType: ActionType;
    entity?: any;
}

id - unique entity key,

entity - the data itself for the entity,

actionType - presents what happened to the entity. actionType can be one of these values: ADD_UPDATE, DELETE.

Each AcNotification you pass to plane$ Observable will make angular-cesium render the wanted plane according to the description components defined inside the ac-layer. It possible to add costume logic to define for each property. In our example, each plane color is determined by getColor().

In the case that ADD_UPDATE is passed, the entity will be created or updated depending on whether it exists or not. In the case that DELETE is passed, the entity will be removed from the map.

In our example we have PlanesService, which returns planes data as RxJs stream. Here it’s only hard-coded data, but in the same way, it could be data from a websocket, HTTP response, or whatever you desire.

In planes.component.ts we get the data from planeService.getPlanes() and map them to $plane that is given to ac-layer. Each plane is converted to an AcNotification object. ac-layer will subscribe to $plane and render our planes accordingly.

Don’t forget to add your component to app.component.ts.

<ac-map>
    <plane-layer></plane-layer>
</ac-map>

All the angular-cesium map layers that you create need to sit under the ac-map hierarchy. This is the way that all the components and layers know which globe they should be rendered on. You also get a nice declarative representation of the layers in your viewer.

We pass props to ac-billboard-desc as expressions that are based on the plane that we defined earlier. Actually, we say: ‘Dear angular-cesium, please create and manage a billboard using those expressions for each plane. Now, when an entity is passed through the stream—based on its id, actionType, and entity—angular-cesium will know what to do. For example, when passing data with the same id and actionType=ADD_UPDATE, the entity will be updated on the map for every message.