This is the basics for creating a cesium globe with a list of planes, each plane is represented as billboard (icon) and label.

Create a Cesium globe

<ac-map/> component creates your Cesium viewer:

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:

Add spatial data to your map

After creating the Cesium viewer we will want to add spatial data to our application. angular-cesium supports all Cesium entities as components. See the full list of components.

angular-cesium uses Cesium entities syntax, so it’s good to be familiar with it. So let’s start with adding a layer of planes to our app. Our app will show a list of planes that can update. Let’s say each plane will consist of a label and a billboard (icon).

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>

@Component({
  selector: 'plane-layer',
  templateUrl: 'plane-layer.component.html',
})
​
export class PlaneLayerComponent implements OnInit {
  planes$: Observable<AcNotification>;
  showTracks  = true;
  
  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;
    }
  }
}

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.

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.

• acFor attribute accepts an RxObserver planes$ , ac-layer will subscribe to the observer and will handle all updates for you.

• Add descriptions components to determine which entity to render, in our example: ac-billboard and ac-label .

  • This example will render a billboard(icon) and label for each plane in the stream.

  • props accepts the same member options as cesium corresponding class. For example <ac-billboard-desc/> accepts same members as cesium Billboard.

Data Flow

angular-cesium’s major benefit is its ability to keep your map (or maps) in perfect sync with all your data sources, whether they are dynamic data sources that push a lot of data over a websocket, or a single HTTP data source that fetches data once, or a user action that changes your inner application state. You can manage all this by using very simple and readable Angular components while focusing on high performance and easy usage.

angular-cesium achieves this with RxJS, a core library used by Angular for representing data streams. (In short, you can subscribe to the stream and get notified when new data arrives) Once a data source has been wrapped with an Rx observable, it can be passed to angular-cesium and then the magic happens :)

All you need to do is create an Angular component that uses that data stream in its template. There, you’ll describe how you want the entities on the stream to look when drawn on the map. See a simple example.​