Getting Started
CORE CONCEPTS
GUIDES
API
The Basics
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
1
<ac-map></ac-map>
Copied!
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:planes-layer.component.html
planes-layer.component.ts
1
<ac-layer acFor="let plane of planes$" [show]="showTracks" [context]="this">
2
<ac-billboard-desc props="{
3
image: plane.image,
4
position: plane.position
5
}">
6
</ac-billboard-desc>
7
​
8
<ac-label-desc props="{
9
position: plane.position,
10
text: plane.name,
11
color: getColor(plane)
12
}">
13
</ac-label-desc>
14
</ac-layer>
Copied!
1
@Component({
2
selector: 'plane-layer',
3
templateUrl: 'plane-layer.component.html',
4
})
5
​
6
export class PlaneLayerComponent implements OnInit {
7
planes$: Observable<AcNotification>;
8
showTracks = true;
9
10
constructor(private planesService: PlanesService) {
11
}
12
​
13
ngOnInit() {
14
this.planes$ = this.planesService.getPlanes().pipe(
15
map(plane => ({
16
id: plane.id,
17
actionType: ActionType.ADD_UPDATE,
18
entity: plane,
19
}))
20
);
21
}
22
​
23
getColor(plane) {
24
if (plane.name.startsWith('Boeing')) {
25
return Cesium.Color.Green;
26
} else {
27
return Cesium.Color.White;
28
}
29
}
30
}
Copied!
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.acForattribute accepts an RxObserverplanes$,ac-layerwill subscribe to the observer and will handle all updates for you.- Add descriptions components to determine which entity to render, in our example:
ac-billboardandac-label.- This example will render a billboard(icon) and label for each plane in the stream.
propsaccepts 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.​
It’s important to mention that angular-cesium only extends and decorates the CesiumJS API, but if you want to use the normal Cesium API you always have access to the Cesium Viewer object.
Last modified 2yr ago