angular-cesium
angular-cesium copied to clipboard
JavaScript library for creating map based web apps using Cesium and Angular
Angular-Cesium
![Drawing](https://preview.ibb.co/cpDuwF/angular_cesium.png)
Create amazing mapping applications using Cesium and Angular components. Angular-Cesium is focused on high performance and simple usage. Check out our Docs and our blog post Intro to angular-cesium.
Getting started
If you are using Angular CLI, you can add the angular-cesium library using schematics
- add
angular-cesium
:$ ng add angular-cesium
Manual installation details here.
Demo
- You can try and learn about angular-cesium from our demo.
- The demo contains many examples, check out the
demo-map.component.ts
file. - Run:
$ git clone https://github.com/articodeltd/angular-cesium.git $ cd angular-cesium $ yarn $ yarn demo:start $ open http://localhost:4200
- More demos:
Basic example
-
In your HTML file :
<ac-map> <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 }"> </ac-label-desc> </ac-layer> </ac-map>
-
ac-map
creates the map -
ac-layer
component represent an array of entities that will be displayed on the map.-
acFor
attribute accepts an RxObserverplanes$
,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
andac-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 exampleac-billboard-desc
accepts same members as cesium Billboard.
For better understading check out the layer guide
Supported Entity types
- billboard -
ac-billboard-desc
/ac-billboard
/ac-billboard-primitive-desc
- stackblitz - label -
ac-label-desc
/ac-label
/ac-label-primitive-desc
- stackblitz - polyline -
ac-polyline-desc
/ac-polyline
/ac-polyline-primitive-desc
- stackblitz - point -
ac-point-desc
/ac-point
/ac-primitive-point
- stackblitz - ellipse -
ac-ellipse-desc
/ac-ellipse
- stackbliz - stackblitz - circle -
ac-circle-desc
/ac-circle
- stackblitz *Same API as ellipse, but accepting a radius instead of semiMajorAxis and semiMinorAxis - stackblitz - polygon -
ac-polygon-desc
/ac-polygon
- stackblitz - model -
ac-model-desc
- stackblitz - box -
ac-box-desc
- stackblitz - corridor -
ac-corridor-desc
- stackblitz - cylinder -
ac-cylinder-desc
- stackblitz - ellipsoid -
ac-ellipsoid-desc
- stackblitz - polyline volume -
ac-polyline-volume-desc
- stackblitz - wall -
ac-wall-desc
- stackblitz - rectangle -
ac-rectangle-decc
- stackblitz
- html -
ac-html-desc
/ac-html
- stackblitz
- arc -
ac-arc-dec
- stackblitz
- array -
ac-array-desc
- stackblitz - czmlPacket -
ac-czml-desc
Map Events
MapEventsManagerService
is a util service for managing all the map events (Click, Mouse_up...), it expose easy API for entity selection, event priority management
and adds custom events (drag and drop, long press).
Usage:
@Component(...)
export class SomeComponent{
constructor(private eventManager: MapEventsManagerService){
// Input about the wanted event
const eventRegistration: EventRegistrationInput = {
event: CesiumEvent.LEFT_CLICK, // event type enum. [required!]
modifier: CesiumEventModifier.CTRL, // event modifier enum. [optional]
entityType: AcEntity, // raise event only if AcEntity is clicked. [optional]
priority: 0, // event priority, default 0 . [optional]
pick: PickOptions.PICK_FIRST // entity pick option, default PickOptions.NO_PICK. [optional]
};
const clickEvent = this.eventManager.register(eventRegistration).subscribe((result) => {
// The EventResult will contain:
// movement(screen location of the event), entities(your entities) , primitives( cesium primitives, like label,billboard...)
console.log('map click', result.movement, 'primitives:', result.primitives, 'entities', result.entities);
});
}
}
For further details check the map events guide
Map layers
With angular cesium you can define your map provider in a declarative way using ac-map-layer-provider
:
<ac-map-layer-provider *ngIf="appSettingsService.showMapLayer" [provider]="MapLayerProviderOptions.ArcGisMapServer"
[options]="{
url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}">
</ac-map-layer-provider>
- All cesium imagery map layers are supported , defined with
[provider]
according to theMapLayerProviderOptions
enum - Pass additional configuration to
[options]
.url
is mandatory. - Support multi map layers, map ordering and map image layer configuration.
- Check out usage example from our demo here
3d Tiles
<ac-3d-tile-layer
*ngIf="appSettingsService.show3dtiles"
[options]="{
url: 'https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s'
}">
</ac-3d-tile-layer>
Multiple maps support
Angular Cesium supports integration of multiple maps, for more details here
MapLayerProviderOptions Updates
MapboxStyleImageryProvider
has been added to MapLayerProviderOptions
for mapBox styles support.
Component Usage:
import{ MapLayerProviderOptions } from 'angular-cesium'
@Component(...)
class SomeComponent{
mapboxStyleImageryProvider = MapLayerProviderOptions.MapboxStyleImageryProvider
Template Usage:
<ac-map>
<ac-map-layer-provider
[provider]="mapboxStyleImageryProvider"
[options]="{
styleId:'style id from mapbox style dashboard item',
url:'https://api.mapbox.com/styles/v1/',
username:'your user name',
scaleFactor:'@2x',
tilesize:'512',
accessToken : 'your access token from map box'
}">
</ac-map-layer-provider>
</ac-map>
Camera
Camera Keyboard Control Service
Service that manages keyboard keys and execute actions per request. Inject the keyboard control service into any layer, under your ac-map component, And defined you keyboard handlers using setKeyboardControls.
this.keyboardControlService.setKeyboardControls({
W: { action: KeyboardAction.CAMERA_FORWARD },
S: { action: KeyboardAction.CAMERA_BACKWARD },
D: { action: KeyboardAction.CAMERA_RIGHT },
A: { action: KeyboardAction.CAMERA_LEFT },
},
CameraService
Util service that wraps cesium camera, exposes the scene's camera and screenSpaceCameraController.
MapsManagerService
Angular Cesium extends cesium api and expose additional features, but if you want to use pure cesium api you can use MapsManagerService to receive cesium viewer or any other util service that was created by ac-map
.
class MyComp {
constructor(mapsManagerService: MapsManagerService)
const viewer = mapsManagerService.getMap().getCesiumViewer();
const mapEventManager = mapsManagerService.getMap().getMapEventsManager();
const cameraService = mapsManagerService.getMap().getCameraService();
}
MapsManagerService
manages all of the maps. The service exposes a getMap()
function that can be used to retrieve a specific map by id.
ZoomToRectangleService
A service that is used to activate a zooming tool that enables the user to draw a rectangle over the map and zoom into the drawn rectangle
Geometry Editors And Widgets
Part of AngularCesiumWidgetsModule
are useful geometry editors tool:
-
CirlcesEditorService
- for drawing circles -
EllipsesEditorService
- for drawing ellipses and circles -
PolylinesEditorService
- for drawing polylines -
PolygonsEditorService
- for drawing polygons -
RectanglesEditorService
- for drawing rectangles -
HippodromeEditorService
- for drawing hippodromes (path in cesium)
Check out the Geometry Editors Doc
ScreenshotService
Take screenshot of your cesium globe.
ContextMenuService - stackblitz
create any custom angular component and anchor it to a map position, context menu guide.
Documents
-
Docs https://docs.angular-cesium.com/
-
Api Docs
License
Support
Angular Cesium is an open source project, feel free to open issues,ask questions and open PRs. For additional support options contact us: [email protected].
Articode is a software company that specializes in GIS solutions and is the creator and the maintainer of angular-cesium. Feel free to contact us for consulting or any business endeavors.