Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/articodeltd/angular-cesium

JavaScript library for creating map based web apps using Cesium and Angular
https://github.com/articodeltd/angular-cesium
angular angular2 cesium javascript
Last synced: 3 months ago
JSON representation
JavaScript library for creating map based web apps using Cesium and Angular
Host: GitHub
URL: https://github.com/articodeltd/angular-cesium
Owner: articodeltd
License: mit
Created: 2017-01-14T23:14:18.000Z (about 8 years ago)
Default Branch: master
Last Pushed: 2024-02-13T18:09:08.000Z (11 months ago)
Last Synced: 2024-09-24T16:20:03.281Z (4 months ago)
Topics: angular, angular2, cesium, javascript
Language: TypeScript
Homepage: https://github.com/articodeltd/angular-cesium/settings/pages
Size: 25.3 MB
Stars: 178
Watchers: 20
Forks: 93
Open Issues: 78
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project

awesome-angular - angular-cesium - JavaScript library for creating map based web apps using Cesium and Angular. (Uncategorized / Uncategorized)
README

        # Angular-Cesium



[![CircleCI](https://circleci.com/gh/articodeltd/angular-cesium.svg?style=shield)](https://circleci.com/gh/articodeltd/angular-cesium)

[![npm version](https://img.shields.io/npm/v/angular-cesium.svg?style=flat-square)](https://www.npmjs.com/package/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](https://docs.angular-cesium.com) and our blog post [Intro to angular-cesium](https://cesium.com/blog/2019/03/28/angular-cesium/).

## Getting started

#### If you are using Angular CLI, you can add the angular-cesium library using schematics

+ add `angular-cesium`:

  ```bash

  $ ng add angular-cesium

  ```

#### Manual installation details [here](https://docs.angular-cesium.com/getting-started/installation).

## 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:

  + [Angular Cesium Demo](https://github.com/articodeltd/angular-cesium-demo)

  + [GeoStrike](http://geo-strike.com) - [Repository](https://github.com/Webiks/GeoStrike)

  + [GLO](https://glo.now.sh) - [Repository](https://github.com/sofwerx/glo-demo)

  + [Safehouse](https://github.com/sofwerx/safehouse)

  + [IMS](https://github.com/davidyaha/ims-workshop)

## Basic example

+ In your HTML file :

  ```html

    

        

            

            

            

            

        

    

  ```

+ `ac-map` creates the map

+ `ac-layer` component represent an array of entities that will be displayed on the map.

  + `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](https://cesiumjs.org/refdoc.html).

For better understading check out the [layer guide](https://docs.angular-cesium.com/core-concepts/ac-layer)

## Supported Entity types

+ billboard - [`ac-billboard-desc`](https://articodeltd.github.io/angular-cesium/components/AcBillboardDescComponent.html) / [`ac-billboard`](https://articodeltd.github.io/angular-cesium/components/AcBillboardComponent.html) / [`ac-billboard-primitive-desc`](https://articodeltd.github.io/angular-cesium/components/AcBillboardPrimitiveDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-billboard-example?embed=1&file=src/app/billboard-layer-example/billboard-layer-example.component.ts)

+ label - [`ac-label-desc`](https://articodeltd.github.io/angular-cesium/components/AcLabelDescComponent.html) / [`ac-label`](https://articodeltd.github.io/angular-cesium/components/AcLabelComponent.html) / [`ac-label-primitive-desc`](https://articodeltd.github.io/angular-cesium/components/AcLabelPrimitiveDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo-label-example?embed=1&file=src/app/label-layer-example/label-layer-example.component.ts)

+ polyline - [`ac-polyline-desc`](https://articodeltd.github.io/angular-cesium/components/AcPolylineDescComponent.html) / [`ac-polyline`](https://articodeltd.github.io/angular-cesium/components/AcPolylineComponent.html) / [`ac-polyline-primitive-desc`](https://articodeltd.github.io/angular-cesium/components/AcPolylinePrimitiveDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-polyline-example?embed=1&file=src/app/polyline-layer-example/polyline-layer-example.component.ts)

+ point - [`ac-point-desc`](https://articodeltd.github.io/angular-cesium/components/AcPointDescComponent.html) / [`ac-point`](https://articodeltd.github.io/angular-cesium/components/AcPointComponent.html) / [`ac-primitive-point`](https://articodeltd.github.io/angular-cesium/components/AcPointPrimitiveDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-point-example?embed=1&file=src/app/point-layer-example/mock-data-provider.service.ts)

+ ellipse - [`ac-ellipse-desc`](https://articodeltd.github.io/angular-cesium/components/AcEllipseDescComponent.html) / [`ac-ellipse`](https://articodeltd.github.io/angular-cesium/components/AcEllipseComponent.html) - [stackbliz](https://stackblitz.com/edit/angular-cesium-demo-ellipse?embed=1&file=src/app/ellipse-layer/ellipse-layer-example.component.ts) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo-ellipse?embed=1&file=src/app/ellipse-layer/ellipse-layer-example.component.ts)

+ circle - [`ac-circle-desc`](https://articodeltd.github.io/angular-cesium/components/AcCircleDescComponent.html) / [`ac-circle`](https://articodeltd.github.io/angular-cesium/components/AcCircleComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-circle-example?embed=1&file=src/app/circle-layer-example/circle-layer-example.component.ts) *Same API as ellipse, but accepting a radius instead of semiMajorAxis and semiMinorAxis - [stackblitz](https://stackblitz.com/edit/angular-cesium-circle-example?embed=1&file=src/app/circle-layer-example/circle-layer-example.component.ts)

+ polygon - [`ac-polygon-desc`](https://articodeltd.github.io/angular-cesium/components/AcPolygonDescComponent.html) / [`ac-polygon`](https://articodeltd.github.io/angular-cesium/components/AcPolygonComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-polygon-example?embed=1&file=src/app/polygon-layer-example/polygon-layer-example.component.ts) 

+ model - [`ac-model-desc`](https://articodeltd.github.io/angular-cesium/components/AcModelDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-model-example?embed=1&file=src/app/models-layer-example/models-layer-example.component.ts)

+ box - [`ac-box-desc`](https://articodeltd.github.io/angular-cesium/components/AcBoxDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-box-example?embed=1&file=src/app/boxes-layer/boxes-layer.component.ts)

+ corridor -[`ac-corridor-desc`](https://articodeltd.github.io/angular-cesium/components/AcCorridorDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo?embed=1&file=src/app/hippodrome-layer/hippodrome-layer-example.component.ts)

+ cylinder - [`ac-cylinder-desc`](https://articodeltd.github.io/angular-cesium/components/AcCylinderDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-cylinder-example?embed=1&file=src/app/cylinder-layer-example/cylinder-layer-example.component.ts)

+ ellipsoid - [`ac-ellipsoid-desc`](https://articodeltd.github.io/angular-cesium/components/AcEllipsoidDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-ellipsoid-example?embed=1&file=src/app/ellipsoid-layer-example/ellipsoid-layer-example.component.ts)

+ polyline volume - [`ac-polyline-volume-desc`](https://articodeltd.github.io/angular-cesium/components/AcPolylineVolumeDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-polyline-volume-example?embed=1&file=src/app/polyline-volume-layer-example/polyline-volume-layer-example.component.ts)

+ wall - [`ac-wall-desc`](https://articodeltd.github.io/angular-cesium/components/AcWallDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-wall-example?embed=1&file=src/app/wall-layer-example/wall-layer-example.component.ts)

+ rectangle -[`ac-rectangle-decc`](https://articodeltd.github.io/angular-cesium/components/AcRectangleDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-rectangle-example?embed=1&file=src/app/rectangle-layer-example/rectangle-layer-example.component.ts)

* html - [`ac-html-desc`](https://articodeltd.github.io/angular-cesium/components/AcHtmlDescComponent.html) / [`ac-html`](https://articodeltd.github.io/angular-cesium/components/AcHtmlComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-html-example?embed=1&file=src/app/html-layer/html-example.component.ts)

+ arc -[`ac-arc-dec`](https://articodeltd.github.io/angular-cesium/components/AcArcDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-arc-example?embed=1&file=src/app/arc-layer/arc-layer-example.component.ts)

* array - [`ac-array-desc`](https://articodeltd.github.io/angular-cesium/components/AcArrayDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo-arrays?embed=1&file=src/app/entities-with-arrays/entities-with-arrays-example.component.ts)

* czmlPacket - [`ac-czml-desc`](https://articodeltd.github.io/angular-cesium/components/AcCzmlDescComponent.html)

## 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:

```javascript

@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](https://docs.angular-cesium.com/guides/map-events)

### Map layers

With angular cesium you can define your map provider in a declarative way using `ac-map-layer-provider` :

```html

    

    

```

- All cesium imagery map layers are supported , defined with `[provider]` according to the `MapLayerProviderOptions` 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](https://github.com/TGFTech/angular-cesium/blob/master/demo/app/components/maps-layer/maps-provider-example.component.html)

### 3d Tiles

```html

   

   

```

### Multiple maps support

Angular Cesium supports integration of multiple maps, for more details [here](https://docs.angular-cesium.com/guides/multiple-maps-sync)

### MapLayerProviderOptions Updates

`MapboxStyleImageryProvider` has been added to `MapLayerProviderOptions` for mapBox styles support. 

Component Usage:

```javascript

  import{ MapLayerProviderOptions } from 'angular-cesium'

  @Component(...)

  class SomeComponent{

    mapboxStyleImageryProvider = MapLayerProviderOptions.MapboxStyleImageryProvider

```

Template Usage:

```html

     

   

```

### Camera

#### [Camera Keyboard Control Service](https://docs.angular-cesium.com/guides/camera-keyboard-control)

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.

```javascript

 this.keyboardControlService.setKeyboardControls({

      W: { action: KeyboardAction.CAMERA_FORWARD },

      S: { action: KeyboardAction.CAMERA_BACKWARD },

      D: { action: KeyboardAction.CAMERA_RIGHT },

      A: { action: KeyboardAction.CAMERA_LEFT },

    },

```

#### [CameraService](https://docs.angular-cesium.com/guides/camera-controls)

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](https://articodeltd.github.io/angular-cesium/injectables/MapsManagerService.html) to receive cesium [viewer](https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html) or any other util service that was created by `ac-map`.

```typescript

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](https://docs.angular-cesium.com/widgets/zoomto-rectangle)

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`](https://docs.angular-cesium.com/widgets/shape-editors/circle-editor) - for drawing circles

+ [`EllipsesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/ellipse-editor) - for drawing ellipses and circles

+ [`PolylinesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/polyline-editor) - for drawing polylines

+ [`PolygonsEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/polygon-editor) - for drawing polygons

+ [`RectanglesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/rectangle-editor) - for drawing rectangles

+ [`HippodromeEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/hippodrome-editor) - for drawing hippodromes (path in cesium)

Check out the [Geometry Editors Doc](https://docs.angular-cesium.com/widgets/shape-editors)

### ScreenshotService

Take screenshot of your cesium globe.

### ContextMenuService - [stackblitz](https://stackblitz.com/edit/angular-cesium-context-menu-example?embed=1&file=src/app/context-menu-layer/context-menu-layer.component.ts)

create any custom angular component and anchor it to a map position, [context menu guide](https://docs.angular-cesium.com/guides/context-menu-on-the-map).

## Documents

+ #### Docs https://docs.angular-cesium.com/

+ #### [Api Docs](https://articodeltd.github.io/angular-cesium/)

## License

[Mit License](https://opensource.org/licenses/MIT)

## 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]](mailto:\\[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.