<script type="module">
import angularCesium from 'https://cdn.skypack.dev/angular-cesium';
</script>
README
Angular-Cesium
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
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);
});
}
}
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.
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.
Angular Cesium is an open source project, feel free to open issues,ask questions and open PRs.
For additional support options contact us: contact@articode.co.
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.