iceye-angular-cesium-fork
Version:
Angular library for working with Cesium.
1,241 lines (1,226 loc) • 548 kB
JavaScript
import { Injectable, NgZone, Optional, InjectionToken, Inject, EventEmitter, Component, ElementRef, Input, ChangeDetectionStrategy, Directive, Output, forwardRef, Pipe, NgModule, Renderer2, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, ContentChild, ComponentFactoryResolver, ContentChildren, HostListener } from '@angular/core';
import { DOCUMENT, CommonModule } from '@angular/common';
import { Utm } from 'geodesy/mgrs';
import { LatLon } from 'geodesy/utm';
import { isNumber } from 'util';
import { publish, mergeMap, delay, takeUntil, filter, map, switchMap, tap, merge as merge$1 } from 'rxjs/operators';
import { Observable, of, Subject, merge, from, BehaviorSubject, fromEvent } from 'rxjs';
import { EllipsePrimitive } from 'primitive-primitives';
import { JsonStringMapper } from 'json-string-mapper';
import { Parse, PIPES_CONFIG, Angular2ParseModule } from 'angular2parse';
import * as _get from 'lodash.get';
class ViewerFactory {
constructor() {
this.cesium = Cesium;
}
/**
* Creates a viewer with default or custom options
* @param mapContainer - container to initialize the viewer on
* @param options - Options to create the viewer with - Optional
*
* @returns new viewer
*/
createViewer(mapContainer, options) {
let viewer = null;
if (options) {
viewer = new this.cesium.Viewer(mapContainer, Object.assign({ contextOptions: {
webgl: { preserveDrawingBuffer: true }
} }, options));
}
else {
viewer = new this.cesium.Viewer(mapContainer, {
contextOptions: {
webgl: { preserveDrawingBuffer: true }
},
});
}
return viewer;
}
}
ViewerFactory.decorators = [
{ type: Injectable }
];
ViewerFactory.ctorParameters = () => [];
/**
* Service for setting cesium viewer map options.
* defaulty angular-cesium doesnt provide this service and viewer is created with default options.
* In order set specific options you must set this service as provider in your component and
* set the wanted options.
* ```typescript
* constructor(viewerConf :ViewerConfiguration ) {
* viewerConf.viewerOptions = { timeline: false };
* }
* ```
* notice this configuration will be for all <ac-maps> in your component.
*/
class ViewerConfiguration {
constructor() {
this.nextViewerOptionsIndex = 0;
this.nextViewerModifierIndex = 0;
}
get viewerOptions() {
return this._viewerOptions;
}
getNextViewerOptions() {
if (this._viewerOptions instanceof Array) {
return this._viewerOptions[this.nextViewerOptionsIndex++];
}
else {
return this._viewerOptions;
}
}
/**
* Can be used to set initial map viewer options.
* If there is more than one map you can give the function an array of options.
* The map initialized first will be set with the first option object in the options array and so on.
*/
set viewerOptions(value) {
this._viewerOptions = value;
}
get viewerModifier() {
return this._viewerModifier;
}
getNextViewerModifier() {
if (this._viewerModifier instanceof Array) {
return this._viewerModifier[this.nextViewerModifierIndex++];
}
else {
return this._viewerModifier;
}
}
/**
* Can be used to set map viewer options after the map has been initialized.
* If there is more than one map you can give the function an array of functions.
* The map initialized first will be set with the first option object in the options array and so on.
*/
set viewerModifier(value) {
this._viewerModifier = value;
}
}
ViewerConfiguration.decorators = [
{ type: Injectable }
];
/**
* Service that initialize cesium viewer and expose cesium viewer and scene.
*/
class CesiumService {
constructor(ngZone, viewerFactory, viewerConfiguration) {
this.ngZone = ngZone;
this.viewerFactory = viewerFactory;
this.viewerConfiguration = viewerConfiguration;
}
init(mapContainer, map) {
this.map = map;
this.ngZone.runOutsideAngular(() => {
const options = this.viewerConfiguration ? this.viewerConfiguration.getNextViewerOptions() : undefined;
this.cesiumViewer = this.viewerFactory.createViewer(mapContainer, options);
const viewerModifier = this.viewerConfiguration && this.viewerConfiguration.getNextViewerModifier();
if (typeof viewerModifier === 'function') {
viewerModifier(this.cesiumViewer);
}
});
}
/**
* For more information see https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html?classFilter=viewe
* @returns cesiumViewer
*/
getViewer() {
return this.cesiumViewer;
}
/**
* For more information see https://cesiumjs.org/Cesium/Build/Documentation/Scene.html?classFilter=scene
* @returns cesium scene
*/
getScene() {
return this.cesiumViewer.scene;
}
/**
* For more information see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
* @returns cesium canvas
*/
getCanvas() {
return this.cesiumViewer.canvas;
}
getMap() {
return this.map;
}
}
CesiumService.decorators = [
{ type: Injectable }
];
CesiumService.ctorParameters = () => [
{ type: NgZone },
{ type: ViewerFactory },
{ type: ViewerConfiguration, decorators: [{ type: Optional }] }
];
/**
* Fix for the constant entity shadowing.
* PR in Cesium repo: https://github.com/AnalyticalGraphicsInc/cesium/pull/5736
*/
// tslint:disable
const AssociativeArray = Cesium.AssociativeArray;
const Color = Cesium.Color;
const ColorGeometryInstanceAttribute = Cesium.ColorGeometryInstanceAttribute;
const defined = Cesium.defined;
const DistanceDisplayCondition = Cesium.DistanceDisplayCondition;
const DistanceDisplayConditionGeometryInstanceAttribute = Cesium.DistanceDisplayConditionGeometryInstanceAttribute;
const ShowGeometryInstanceAttribute = Cesium.ShowGeometryInstanceAttribute;
const Primitive = Cesium.Primitive;
const ShadowMode = Cesium.ShadowMode;
const BoundingSphereState = Cesium.BoundingSphereState;
const ColorMaterialProperty = Cesium.ColorMaterialProperty;
const MaterialProperty = Cesium.MaterialProperty;
const Property = Cesium.Property;
var colorScratch = new Color();
var distanceDisplayConditionScratch = new DistanceDisplayCondition();
var defaultDistanceDisplayCondition = new DistanceDisplayCondition();
function Batch(primitives, translucent, appearanceType, depthFailAppearanceType, depthFailMaterialProperty, closed, shadows) {
this.translucent = translucent;
this.appearanceType = appearanceType;
this.depthFailAppearanceType = depthFailAppearanceType;
this.depthFailMaterialProperty = depthFailMaterialProperty;
this.depthFailMaterial = undefined;
this.closed = closed;
this.shadows = shadows;
this.primitives = primitives;
this.createPrimitive = false;
this.waitingOnCreate = false;
this.primitive = undefined;
this.oldPrimitive = undefined;
this.geometry = new AssociativeArray();
this.updaters = new AssociativeArray();
this.updatersWithAttributes = new AssociativeArray();
this.attributes = new AssociativeArray();
this.subscriptions = new AssociativeArray();
this.showsUpdated = new AssociativeArray();
this.itemsToRemove = [];
this.invalidated = false;
var removeMaterialSubscription;
if (defined(depthFailMaterialProperty)) {
removeMaterialSubscription = depthFailMaterialProperty.definitionChanged.addEventListener(Batch.prototype.onMaterialChanged, this);
}
this.removeMaterialSubscription = removeMaterialSubscription;
}
Batch.prototype.onMaterialChanged = function () {
this.invalidated = true;
};
Batch.prototype.isMaterial = function (updater) {
var material = this.depthFailMaterialProperty;
var updaterMaterial = updater.depthFailMaterialProperty;
if (updaterMaterial === material) {
return true;
}
if (defined(material)) {
return material.equals(updaterMaterial);
}
return false;
};
Batch.prototype.add = function (updater, instance) {
var id = updater.id;
this.createPrimitive = true;
this.geometry.set(id, instance);
this.updaters.set(id, updater);
if (!updater.hasConstantFill || !updater.fillMaterialProperty.isConstant || !Property.isConstant(updater.distanceDisplayConditionProperty)) {
this.updatersWithAttributes.set(id, updater);
}
else {
var that = this;
this.subscriptions.set(id, updater.entity.definitionChanged.addEventListener(function (entity, propertyName, newValue, oldValue) {
if (propertyName === 'isShowing') {
that.showsUpdated.set(updater.id, updater);
}
}));
}
};
Batch.prototype.remove = function (updater) {
var id = updater.id;
this.createPrimitive = this.geometry.remove(id) || this.createPrimitive;
if (this.updaters.remove(id)) {
this.updatersWithAttributes.remove(id);
var unsubscribe = this.subscriptions.get(id);
if (defined(unsubscribe)) {
unsubscribe();
this.subscriptions.remove(id);
}
}
};
Batch.prototype.update = function (time) {
var isUpdated = true;
var removedCount = 0;
var primitive = this.primitive;
var primitives = this.primitives;
var attributes;
var i;
if (this.createPrimitive) {
var geometries = this.geometry.values;
var geometriesLength = geometries.length;
if (geometriesLength > 0) {
if (defined(primitive)) {
if (!defined(this.oldPrimitive)) {
this.oldPrimitive = primitive;
}
else {
primitives.remove(primitive);
}
}
for (i = 0; i < geometriesLength; i++) {
var geometryItem = geometries[i];
var originalAttributes = geometryItem.attributes;
attributes = this.attributes.get(geometryItem.id.id);
if (defined(attributes)) {
if (defined(originalAttributes.show)) {
originalAttributes.show.value = attributes.show;
}
if (defined(originalAttributes.color)) {
originalAttributes.color.value = attributes.color;
}
if (defined(originalAttributes.depthFailColor)) {
originalAttributes.depthFailColor.value = attributes.depthFailColor;
}
}
}
var depthFailAppearance;
if (defined(this.depthFailAppearanceType)) {
if (defined(this.depthFailMaterialProperty)) {
this.depthFailMaterial = MaterialProperty.getValue(time, this.depthFailMaterialProperty, this.depthFailMaterial);
}
depthFailAppearance = new this.depthFailAppearanceType({
material: this.depthFailMaterial,
translucent: this.translucent,
closed: this.closed
});
}
primitive = new Primitive({
show: false,
asynchronous: true,
geometryInstances: geometries,
appearance: new this.appearanceType({
flat: this.shadows === ShadowMode.DISABLED || this.shadows === ShadowMode.CAST_ONLY,
translucent: this.translucent,
closed: this.closed
}),
depthFailAppearance: depthFailAppearance,
shadows: this.shadows
});
primitives.add(primitive);
isUpdated = false;
}
else {
if (defined(primitive)) {
primitives.remove(primitive);
primitive = undefined;
}
var oldPrimitive = this.oldPrimitive;
if (defined(oldPrimitive)) {
primitives.remove(oldPrimitive);
this.oldPrimitive = undefined;
}
}
this.attributes.removeAll();
this.primitive = primitive;
this.createPrimitive = false;
this.waitingOnCreate = true;
}
else if (defined(primitive) && primitive.ready) {
primitive.show = true;
if (defined(this.oldPrimitive)) {
primitives.remove(this.oldPrimitive);
this.oldPrimitive = undefined;
}
if (defined(this.depthFailAppearanceType) && !(this.depthFailMaterialProperty instanceof ColorMaterialProperty)) {
this.depthFailMaterial = MaterialProperty.getValue(time, this.depthFailMaterialProperty, this.depthFailMaterial);
this.primitive.depthFailAppearance.material = this.depthFailMaterial;
}
var updatersWithAttributes = this.updatersWithAttributes.values;
var length = updatersWithAttributes.length;
var waitingOnCreate = this.waitingOnCreate;
for (i = 0; i < length; i++) {
var updater = updatersWithAttributes[i];
var instance = this.geometry.get(updater.id);
attributes = this.attributes.get(instance.id.id);
if (!defined(attributes)) {
attributes = primitive.getGeometryInstanceAttributes(instance.id);
this.attributes.set(instance.id.id, attributes);
}
if (!updater.fillMaterialProperty.isConstant || waitingOnCreate) {
var colorProperty = updater.fillMaterialProperty.color;
var resultColor = Property.getValueOrDefault(colorProperty, time, Color.WHITE, colorScratch);
if (!Color.equals(attributes._lastColor, resultColor)) {
attributes._lastColor = Color.clone(resultColor, attributes._lastColor);
attributes.color = ColorGeometryInstanceAttribute.toValue(resultColor, attributes.color);
if ((this.translucent && attributes.color[3] === 255) || (!this.translucent && attributes.color[3] !== 255)) {
this.itemsToRemove[removedCount++] = updater;
}
}
}
if (defined(this.depthFailAppearanceType) && updater.depthFailMaterialProperty instanceof ColorMaterialProperty && (!updater.depthFailMaterialProperty.isConstant || waitingOnCreate)) {
var depthFailColorProperty = updater.depthFailMaterialProperty.color;
var depthColor = Property.getValueOrDefault(depthFailColorProperty, time, Color.WHITE, colorScratch);
if (!Color.equals(attributes._lastDepthFailColor, depthColor)) {
attributes._lastDepthFailColor = Color.clone(depthColor, attributes._lastDepthFailColor);
attributes.depthFailColor = ColorGeometryInstanceAttribute.toValue(depthColor, attributes.depthFailColor);
}
}
var show = updater.entity.isShowing && (updater.hasConstantFill || updater.isFilled(time));
var currentShow = attributes.show[0] === 1;
if (show !== currentShow) {
attributes.show = ShowGeometryInstanceAttribute.toValue(show, attributes.show);
}
var distanceDisplayConditionProperty = updater.distanceDisplayConditionProperty;
if (!Property.isConstant(distanceDisplayConditionProperty)) {
var distanceDisplayCondition = Property.getValueOrDefault(distanceDisplayConditionProperty, time, defaultDistanceDisplayCondition, distanceDisplayConditionScratch);
if (!DistanceDisplayCondition.equals(distanceDisplayCondition, attributes._lastDistanceDisplayCondition)) {
attributes._lastDistanceDisplayCondition = DistanceDisplayCondition.clone(distanceDisplayCondition, attributes._lastDistanceDisplayCondition);
attributes.distanceDisplayCondition = DistanceDisplayConditionGeometryInstanceAttribute.toValue(distanceDisplayCondition, attributes.distanceDisplayCondition);
}
}
}
this.updateShows(primitive);
this.waitingOnCreate = false;
}
else if (defined(primitive) && !primitive.ready) {
isUpdated = false;
}
this.itemsToRemove.length = removedCount;
return isUpdated;
};
Batch.prototype.updateShows = function (primitive) {
var showsUpdated = this.showsUpdated.values;
var length = showsUpdated.length;
for (var i = 0; i < length; i++) {
var updater = showsUpdated[i];
var instance = this.geometry.get(updater.id);
var attributes = this.attributes.get(instance.id.id);
if (!defined(attributes)) {
attributes = primitive.getGeometryInstanceAttributes(instance.id);
this.attributes.set(instance.id.id, attributes);
}
var show = updater.entity.isShowing;
var currentShow = attributes.show[0] === 1;
if (show !== currentShow) {
attributes.show = ShowGeometryInstanceAttribute.toValue(show, attributes.show);
}
}
this.showsUpdated.removeAll();
};
Batch.prototype.contains = function (updater) {
return this.updaters.contains(updater.id);
};
Batch.prototype.getBoundingSphere = function (updater, result) {
var primitive = this.primitive;
if (!primitive.ready) {
return BoundingSphereState.PENDING;
}
var attributes = primitive.getGeometryInstanceAttributes(updater.entity);
if (!defined(attributes) || !defined(attributes.boundingSphere) || //
(defined(attributes.show) && attributes.show[0] === 0)) {
return BoundingSphereState.FAILED;
}
attributes.boundingSphere.clone(result);
return BoundingSphereState.DONE;
};
Batch.prototype.removeAllPrimitives = function () {
var primitives = this.primitives;
var primitive = this.primitive;
if (defined(primitive)) {
primitives.remove(primitive);
this.primitive = undefined;
this.geometry.removeAll();
this.updaters.removeAll();
}
var oldPrimitive = this.oldPrimitive;
if (defined(oldPrimitive)) {
primitives.remove(oldPrimitive);
this.oldPrimitive = undefined;
}
};
Batch.prototype.destroy = function () {
var primitive = this.primitive;
var primitives = this.primitives;
if (defined(primitive)) {
primitives.remove(primitive);
}
var oldPrimitive = this.oldPrimitive;
if (defined(oldPrimitive)) {
primitives.remove(oldPrimitive);
}
if (defined(this.removeMaterialSubscription)) {
this.removeMaterialSubscription();
}
};
let wasFixed = false;
function fixCesiumEntitiesShadows() {
if (wasFixed) {
return;
}
Cesium.StaticGeometryColorBatch.prototype.add = function (time, updater) {
var items;
var translucent;
var instance = updater.createFillGeometryInstance(time);
if (instance.attributes.color.value[3] === 255) {
items = this._solidItems;
translucent = false;
}
else {
items = this._translucentItems;
translucent = true;
}
var length = items.length;
for (var i = 0; i < length; i++) {
var item = items[i];
if (item.isMaterial(updater)) {
item.add(updater, instance);
return;
}
}
var batch = new Batch(this._primitives, translucent, this._appearanceType, this._depthFailAppearanceType, updater.depthFailMaterialProperty, this._closed, this._shadows);
batch.add(updater, instance);
items.push(batch);
};
wasFixed = true;
}
const ANGULAR_CESIUM_CONFIG = new InjectionToken('ANGULAR_CESIUM_CONFIG');
class ConfigurationService {
constructor(config) {
this.config = config;
const fixEntitiesShadows = config ? config.fixEntitiesShadows : true;
if (fixEntitiesShadows !== false) {
fixCesiumEntitiesShadows();
}
}
}
ConfigurationService.decorators = [
{ type: Injectable }
];
ConfigurationService.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [ANGULAR_CESIUM_CONFIG,] }] }
];
/**
* Cesium scene modes
*/
var SceneMode;
(function (SceneMode) {
SceneMode[SceneMode["SCENE3D"] = 0] = "SCENE3D";
SceneMode[SceneMode["COLUMBUS_VIEW"] = 1] = "COLUMBUS_VIEW";
SceneMode[SceneMode["SCENE2D"] = 2] = "SCENE2D";
SceneMode[SceneMode["PERFORMANCE_SCENE2D"] = 3] = "PERFORMANCE_SCENE2D";
})(SceneMode || (SceneMode = {}));
/**
* The service exposes the scene's camera and screenSpaceCameraController
* SceneMode.PERFORMANCE_SCENE2D - is a 3D scene mode that acts like Cesium 2D mode,
* but is more efficient performance wise.
*/
class CameraService {
constructor() {
this.isSceneModePerformance2D = false;
}
init(cesiumService) {
this.viewer = cesiumService.getViewer();
this.scene = cesiumService.getScene();
this.screenSpaceCameraController = this.scene.screenSpaceCameraController;
this.camera = this.scene.camera;
this.lastRotate = this.screenSpaceCameraController.enableRotate;
this.lastTilt = this.screenSpaceCameraController.enableTilt;
this.lastLook = this.screenSpaceCameraController.enableLook;
}
_listenToSceneModeMorph(callback) {
this.morphListenerCancelFn = this.scene.morphStart.addEventListener(callback);
}
_revertCameraProperties() {
this.isSceneModePerformance2D = false;
this.enableTilt(this.lastTilt);
this.enableRotate(this.lastRotate);
this.enableLook(this.lastLook);
}
/**
* Gets the scene's camera
*/
getCamera() {
return this.camera;
}
/**
* Gets the scene's screenSpaceCameraController
*/
getScreenSpaceCameraController() {
return this.screenSpaceCameraController;
}
/**
* Gets the minimum zoom value in meters
*/
getMinimumZoom() {
return this.screenSpaceCameraController.minimumZoomDistance;
}
/**
* Sets the minimum zoom value in meters
* @param zoom amount
*/
setMinimumZoom(amount) {
this.screenSpaceCameraController.minimumZoomDistance = amount;
}
/**
* Gets the maximum zoom value in meters
*/
getMaximumZoom() {
return this.screenSpaceCameraController.maximumZoomDistance;
}
/**
* Sets the maximum zoom value in meters
* @param zoom amount
*/
setMaximumZoom(amount) {
this.screenSpaceCameraController.maximumZoomDistance = amount;
}
/**
* Sets if the camera is able to tilt
*/
enableTilt(tilt) {
this.screenSpaceCameraController.enableTilt = tilt;
}
/**
* Sets if the camera is able to rotate
*/
enableRotate(rotate) {
this.screenSpaceCameraController.enableRotate = rotate;
}
/**
* Sets if the camera is able to free-look
*/
enableLook(lock) {
this.screenSpaceCameraController.enableLook = lock;
}
/**
* Sets if the camera is able to translate
*/
enableTranslate(translate) {
this.screenSpaceCameraController.enableTranslate = translate;
}
/**
* Sets if the camera is able to zoom
*/
enableZoom(zoom) {
this.screenSpaceCameraController.enableZoom = zoom;
}
/**
* Sets if the camera receives inputs
*/
enableInputs(inputs) {
this.screenSpaceCameraController.enableInputs = inputs;
}
/**
* Sets the map's SceneMode
* @param sceneMode - The SceneMode to morph the scene into.
* @param duration - The duration of scene morph animations, in seconds
*/
setSceneMode(sceneMode, duration) {
switch (sceneMode) {
case SceneMode.SCENE3D: {
if (this.isSceneModePerformance2D) {
this._revertCameraProperties();
}
this.scene.morphTo3D(duration);
break;
}
case SceneMode.COLUMBUS_VIEW: {
if (this.isSceneModePerformance2D) {
this._revertCameraProperties();
}
this.scene.morphToColumbusView(duration);
break;
}
case SceneMode.SCENE2D: {
if (this.isSceneModePerformance2D) {
this._revertCameraProperties();
}
this.scene.morphTo2D(duration);
break;
}
case SceneMode.PERFORMANCE_SCENE2D: {
this.isSceneModePerformance2D = true;
this.lastLook = this.screenSpaceCameraController.enableLook;
this.lastTilt = this.screenSpaceCameraController.enableTilt;
this.lastRotate = this.screenSpaceCameraController.enableRotate;
this.screenSpaceCameraController.enableTilt = false;
this.screenSpaceCameraController.enableRotate = false;
this.screenSpaceCameraController.enableLook = false;
if (this.morphListenerCancelFn) {
this.morphListenerCancelFn();
}
this.scene.morphToColumbusView(duration);
const morphCompleteEventListener = this.scene.morphComplete.addEventListener(() => {
this.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(0.0, 0.0, Math.min(CameraService.PERFORMANCE_2D_ALTITUDE, this.getMaximumZoom())),
orientation: {
pitch: Cesium.Math.toRadians(-90)
}
});
morphCompleteEventListener();
this._listenToSceneModeMorph(this._revertCameraProperties.bind(this));
});
break;
}
}
}
/**
* Flies the camera to a destination
* API: https://cesiumjs.org/Cesium/Build/Documentation/Camera.html?classFilter=cam#flyTo
*/
cameraFlyTo(options) {
return this.camera.flyTo(options);
}
/**
* Flies the camera to a target
* API: https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html?classFilter=viewer#flyTo
* @returns Promise<boolean>
*/
flyTo(target, options) {
return this.viewer.flyTo(target, options);
}
/**
* Zooms amount along the camera's view vector.
* API: https://cesiumjs.org/Cesium/Build/Documentation/Camera.html#zoomIn
*/
zoomIn(amount) {
return this.camera.zoomIn(amount || this.camera.defaultZoomAmount);
}
/**
* Zooms amount along the opposite direction of the camera's view vector.
* API: https://cesiumjs.org/Cesium/Build/Documentation/Camera.html#zoomOut
*/
zoomOut(amount) {
return this.camera.zoomOut(amount || this.camera.defaultZoomAmount);
}
/**
* Zoom the camera to a target
* API: https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html?classFilter=viewer#zoomTo
* @returns Promise<boolean>
*/
zoomTo(target, offset) {
return this.viewer.zoomTo(target, offset);
}
/**
* Flies the camera to a destination
* API: https://cesiumjs.org/Cesium/Build/Documentation/Camera.html?classFilter=camera#setView
* @param options viewer options
*/
setView(options) {
this.camera.setView(options);
}
/**
* Set camera's rotation
*/
setRotation(degreesInRadians) {
this.setView({ orientation: { heading: degreesInRadians } });
}
/**
* Locks or unlocks camera rotation
*/
lockRotation(lock) {
this.scene.screenSpaceCameraController.enableRotate = !lock;
}
/**
* Make the camera track a specific entity
* API: https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html?classFilter=viewer#trackedEntity
* @param cesiumEntity - cesium entity( billboard, polygon...) to track
* @param options - track entity options
*/
trackEntity(cesiumEntity, options) {
const flyTo = (options && options.flyTo) || false;
this.viewer.trackedEntity = undefined;
return new Promise(resolve => {
if (flyTo) {
const flyToDuration = (options && options.flyToDuration) || 1;
const altitude = (options && options.altitude) || 10000;
// Calc entity flyTo position and wanted altitude
const entPosCar3 = cesiumEntity.position.getValue(Cesium.JulianDate.now());
const entPosCart = Cesium.Cartographic.fromCartesian(entPosCar3);
const zoomAmount = altitude - entPosCart.height;
entPosCart.height = altitude;
const flyToPosition = Cesium.Cartesian3.fromRadians(entPosCart.longitude, entPosCart.latitude, entPosCart.height);
this.cameraFlyTo({
duration: flyToDuration,
destination: flyToPosition,
complete: () => {
this.viewer.trackedEntity = cesiumEntity;
setTimeout(() => {
if (zoomAmount > 0) {
this.camera.zoomOut(zoomAmount);
}
else {
this.camera.zoomIn(zoomAmount);
}
}, 0);
resolve();
}
});
}
else {
this.viewer.trackedEntity = cesiumEntity;
resolve();
}
});
}
untrackEntity() {
this.trackEntity();
}
}
CameraService.PERFORMANCE_2D_ALTITUDE = 25000000;
CameraService.decorators = [
{ type: Injectable }
];
CameraService.ctorParameters = () => [];
/**
* Event options for registration on map-event-manager.
*/
var CesiumEvent;
(function (CesiumEvent) {
CesiumEvent[CesiumEvent["MOUSE_MOVE"] = Cesium.ScreenSpaceEventType.MOUSE_MOVE] = "MOUSE_MOVE";
CesiumEvent[CesiumEvent["LEFT_CLICK"] = Cesium.ScreenSpaceEventType.LEFT_CLICK] = "LEFT_CLICK";
CesiumEvent[CesiumEvent["LEFT_DOUBLE_CLICK"] = Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK] = "LEFT_DOUBLE_CLICK";
CesiumEvent[CesiumEvent["LEFT_DOWN"] = Cesium.ScreenSpaceEventType.LEFT_DOWN] = "LEFT_DOWN";
CesiumEvent[CesiumEvent["LEFT_UP"] = Cesium.ScreenSpaceEventType.LEFT_UP] = "LEFT_UP";
CesiumEvent[CesiumEvent["MIDDLE_CLICK"] = Cesium.ScreenSpaceEventType.MIDDLE_CLICK] = "MIDDLE_CLICK";
CesiumEvent[CesiumEvent["MIDDLE_DOUBLE_CLICK"] = Cesium.ScreenSpaceEventType.MIDDLE_DOUBLE_CLICK] = "MIDDLE_DOUBLE_CLICK";
CesiumEvent[CesiumEvent["MIDDLE_DOWN"] = Cesium.ScreenSpaceEventType.MIDDLE_DOWN] = "MIDDLE_DOWN";
CesiumEvent[CesiumEvent["MIDDLE_UP"] = Cesium.ScreenSpaceEventType.MIDDLE_UP] = "MIDDLE_UP";
CesiumEvent[CesiumEvent["PINCH_START"] = Cesium.ScreenSpaceEventType.PINCH_START] = "PINCH_START";
CesiumEvent[CesiumEvent["PINCH_END"] = Cesium.ScreenSpaceEventType.PINCH_END] = "PINCH_END";
CesiumEvent[CesiumEvent["PINCH_MOVE"] = Cesium.ScreenSpaceEventType.PINCH_MOVE] = "PINCH_MOVE";
CesiumEvent[CesiumEvent["RIGHT_CLICK"] = Cesium.ScreenSpaceEventType.RIGHT_CLICK] = "RIGHT_CLICK";
CesiumEvent[CesiumEvent["RIGHT_DOUBLE_CLICK"] = Cesium.ScreenSpaceEventType.RIGHT_DOUBLE_CLICK] = "RIGHT_DOUBLE_CLICK";
CesiumEvent[CesiumEvent["RIGHT_DOWN"] = Cesium.ScreenSpaceEventType.RIGHT_DOWN] = "RIGHT_DOWN";
CesiumEvent[CesiumEvent["RIGHT_UP"] = Cesium.ScreenSpaceEventType.RIGHT_UP] = "RIGHT_UP";
CesiumEvent[CesiumEvent["WHEEL"] = Cesium.ScreenSpaceEventType.WHEEL] = "WHEEL";
CesiumEvent[CesiumEvent["LONG_LEFT_PRESS"] = 110] = "LONG_LEFT_PRESS";
CesiumEvent[CesiumEvent["LONG_RIGHT_PRESS"] = 111] = "LONG_RIGHT_PRESS";
CesiumEvent[CesiumEvent["LONG_MIDDLE_PRESS"] = 112] = "LONG_MIDDLE_PRESS";
CesiumEvent[CesiumEvent["LEFT_CLICK_DRAG"] = 113] = "LEFT_CLICK_DRAG";
CesiumEvent[CesiumEvent["RIGHT_CLICK_DRAG"] = 114] = "RIGHT_CLICK_DRAG";
CesiumEvent[CesiumEvent["MIDDLE_CLICK_DRAG"] = 115] = "MIDDLE_CLICK_DRAG";
})(CesiumEvent || (CesiumEvent = {}));
/**
* NO_PICK, - will not pick entities
* PICK_FIRST - first entity will be picked . use Cesium.scene.pick()
* PICK_ONE - in case a few entities are picked plonter is resolved . use Cesium.scene.drillPick()
* PICK_ALL - all entities are picked. use Cesium.scene.drillPick()
*/
var PickOptions;
(function (PickOptions) {
PickOptions[PickOptions["NO_PICK"] = 0] = "NO_PICK";
PickOptions[PickOptions["PICK_FIRST"] = 1] = "PICK_FIRST";
PickOptions[PickOptions["PICK_ONE"] = 2] = "PICK_ONE";
PickOptions[PickOptions["PICK_ALL"] = 3] = "PICK_ALL";
})(PickOptions || (PickOptions = {}));
/**
* The Service manages a singleton context menu over the map. It should be initialized with MapEventsManager.
* The Service allows opening and closing of the context menu and passing data to the context menu inner component.
*
* notice, `data` will be injected to your custom menu component into the `data` field in the component.
* __Usage :__
* ```
* ngOnInit() {
* this.clickEvent$ = this.eventsManager.register({ event: CesiumEvent.RIGHT_CLICK, pick: PickOptions.PICK_ONE });
* this.clickEvent$.subscribe(result => {
* if (result.entities) {
* const pickedMarker = result.entities[0];
* this.contextMenuService.open(MapContextmenuComponent, pickedMarker.position, {
* data: {
* myData: data,
* onDelete: () => this.delete(pickedMarker.id)
* }
* });
* }
* });
* }
*
*
* private delete(id) {
* this.mapMenu.close();
* this.detailedSiteService.removeMarker(id);
* }
* ```
*/
class ContextMenuService {
constructor() {
this._showContextMenu = false;
this._contextMenuChangeNotifier = new EventEmitter();
this._onOpen = new EventEmitter();
this._onClose = new EventEmitter();
this._defaultContextMenuOptions = {
closeOnLeftCLick: true,
closeOnLeftClickPriority: 10,
};
}
get contextMenuChangeNotifier() {
return this._contextMenuChangeNotifier;
}
get showContextMenu() {
return this._showContextMenu;
}
get options() {
return this._options;
}
get position() {
return this._position;
}
get content() {
return this._content;
}
get onOpen() {
return this._onOpen;
}
get onClose() {
return this._onClose;
}
init(mapEventsManager) {
this.mapEventsManager = mapEventsManager;
}
open(contentComponent, position, options = {}) {
this.close();
this._content = contentComponent;
this._position = position;
this._options = Object.assign({}, this._defaultContextMenuOptions, options);
this._showContextMenu = true;
if (this.mapEventsManager && this._options.closeOnLeftCLick) {
this.leftClickRegistration = this.mapEventsManager.register({
event: CesiumEvent.LEFT_CLICK,
pick: PickOptions.NO_PICK,
priority: this._options.closeOnLeftClickPriority,
});
this.leftClickSubscription = this.leftClickRegistration.subscribe(() => {
this.leftClickSubscription.unsubscribe();
this.close();
});
}
this._contextMenuChangeNotifier.emit();
this._onOpen.emit();
}
close() {
this._content = undefined;
this._position = undefined;
this._options = undefined;
this._showContextMenu = false;
if (this.leftClickRegistration) {
this.leftClickRegistration.dispose();
this.leftClickRegistration = undefined;
}
if (this.leftClickSubscription) {
this.leftClickSubscription.unsubscribe();
this.leftClickSubscription = undefined;
}
this._contextMenuChangeNotifier.emit();
this._onClose.emit();
}
}
ContextMenuService.decorators = [
{ type: Injectable }
];
const LatLonVectors = window['geodesy']['LatLonVectors']; // doesnt exists on typings
/**
* Given different types of coordinates, we provide you a service converting those types to the most common other types.
* We are using the geodesy implementation of UTM conversion. see: https://github.com/chrisveness/geodesy.
*
* @example
* import { Component, OnInit } from '@angular/core';
* import { CoordinateConverter } from 'angular2-cesium';
*
* @Component({
* selector:'my-component',
* template:'<div>{{showCartographic}}</div>',
* providers:[CoordinateConverter]
* })
* export class MyComponent implements OnInit {
* showCartographic;
*
* constructor(private coordinateConverter:CoordinateConverter){
* }
*
* ngOnInit(){
* this.showCartographic = this.coordinateConverter.degreesToCartographic(5, 5, 5);
* }
* }
*
*/
class CoordinateConverter {
constructor(cesiumService) {
this.cesiumService = cesiumService;
}
static cartesian3ToLatLon(cartesian3, ellipsoid) {
const cart = Cesium.Cartographic.fromCartesian(cartesian3, ellipsoid);
return {
lon: Cesium.Math.toDegrees(cart.longitude),
lat: Cesium.Math.toDegrees(cart.latitude),
height: cart.height
};
}
screenToCartesian3(screenPos, addMapCanvasBoundsToPos) {
if (!this.cesiumService) {
throw new Error('ANGULAR2-CESIUM - Cesium service should be provided in order' +
' to do screen position calculations');
}
else {
const screenPosition = Object.assign({}, screenPos);
if (addMapCanvasBoundsToPos) {
const mapBounds = this.cesiumService.getViewer().canvas.getBoundingClientRect();
screenPosition.x += mapBounds.left;
screenPosition.y += mapBounds.top;
}
const camera = this.cesiumService.getViewer().camera;
return camera.pickEllipsoid(screenPosition);
}
}
screenToCartographic(screenPos, ellipsoid) {
return this.cartesian3ToCartographic(this.screenToCartesian3(screenPos), ellipsoid);
}
cartesian3ToCartographic(cartesian, ellipsoid) {
return Cesium.Cartographic.fromCartesian(cartesian, ellipsoid);
}
degreesToCartographic(longitude, latitude, height) {
return Cesium.Cartographic.fromDegrees(longitude, latitude, height);
}
radiansToCartographic(longitude, latitude, height) {
return Cesium.Cartographic.fromRadians(longitude, latitude, height);
}
degreesToUTM(longitude, latitude) {
return new LatLon(latitude, longitude).toUtm();
}
UTMToDegrees(zone, hemisphereType, easting, northing) {
return this.geodesyToCesiumObject(new Utm(zone, hemisphereType, easting, northing).toLatLon());
}
geodesyToCesiumObject(geodesyRadians) {
return {
longitude: geodesyRadians.lon,
latitude: geodesyRadians.lat,
height: geodesyRadians['height'] ? geodesyRadians['height'] : 0
};
}
/**
* middle point between two points
* @param first (latitude,longitude) in radians
* @param second (latitude,longitude) in radians
*/
midPointToCartesian3(first, second) {
const toDeg = (rad) => Cesium.Math.toDegrees(rad);
const firstPoint = new LatLonVectors(toDeg(first.latitude), toDeg(first.longitude));
const secondPoint = new LatLonVectors(toDeg(second.latitude), toDeg(second.longitude));
const middlePoint = firstPoint.midpointTo(secondPoint);
return Cesium.Cartesian3.fromDegrees(middlePoint.lon, middlePoint.lat);
}
middlePointByScreen(position0, position1) {
const scene = this.cesiumService.getScene();
const screenPosition1 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position0);
const screenPosition2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position1);
const middleScreenPoint = new Cesium.Cartesian2((screenPosition2.x + screenPosition1.x) / 2.0, (screenPosition2.y + screenPosition1.y) / 2.0);
return scene.pickPosition(middleScreenPoint);
}
/**
* initial bearing between two points
*
* * @return bearing in degrees
* @param first - {latitude,longitude} in radians
* @param second - {latitude,longitude} in radians
*/
bearingTo(first, second) {
const toDeg = (rad) => Cesium.Math.toDegrees(rad);
const firstPoint = new LatLonVectors(toDeg(first.latitude), toDeg(first.longitude));
const secondPoint = new LatLonVectors(toDeg(second.latitude), toDeg(second.longitude));
const bearing = firstPoint.bearingTo(secondPoint);
return bearing;
}
/**
* initial bearing between two points
*
* @return bearing in degrees
*/
bearingToCartesian(firstCartesian3, secondCartesian3) {
const firstCart = Cesium.Cartographic.fromCartesian(firstCartesian3);
const secondCart = Cesium.Cartographic.fromCartesian(secondCartesian3);
return this.bearingTo(firstCart, secondCart);
}
}
CoordinateConverter.decorators = [
{ type: Injectable }
];
CoordinateConverter.ctorParameters = () => [
{ type: CesiumService, decorators: [{ type: Optional }] }
];
/**
* Abstract drawer. All drawers extends this class.
*/
class BasicDrawerService {
constructor() {
}
setPropsAssigner(assigner) {
this._propsAssigner = assigner;
}
}
/**
* General primitives drawer responsible of drawing Cesium primitives.
* Drawers the handle Cesium primitives extend it.
*/
class PrimitivesDrawerService extends BasicDrawerService {
constructor(drawerType, cesiumService) {
super();
this.drawerType = drawerType;
this.cesiumService = cesiumService;
this._show = true;
}
init() {
this._cesiumCollection = new this.drawerType();
this._primitiveCollectionWrap = new Cesium.PrimitiveCollection();
this._primitiveCollectionWrap.add(this._cesiumCollection);
this.cesiumService.getScene().primitives.add(this._primitiveCollectionWrap);
}
add(cesiumProps, ...args) {
return this._cesiumCollection.add(cesiumProps);
}
update(entity, cesiumProps, ...args) {
if (this._propsAssigner) {
this._propsAssigner(entity, cesiumProps);
}
else {
Object.assign(entity, cesiumProps);
}
}
remove(entity) {
this._cesiumCollection.remove(entity);
}
removeAll() {
this._cesiumCollection.removeAll();
}
setShow(showValue) {
this._show = showValue;
this._primitiveCollectionWrap.show = showValue;
}
getShow() {
return this._show;
}
}
class GeoUtilsService {
constructor(cesiumService) {
this.cesiumService = cesiumService;
}
static pointByLocationDistanceAndAzimuth(currentLocation, meterDistance, radianAzimuth, deprecated) {
const distance = meterDistance / Cesium.Ellipsoid.WGS84.maximumRadius;
const cartographicLocation = currentLocation instanceof Cesium.Cartesian3 ? Cesium.Cartographic.fromCartesian(currentLocation) : currentLocation;
const cartesianLocation = currentLocation instanceof Cesium.Cartesian3
? currentLocation
: Cesium.Cartesian3.fromRadians(currentLocation.longitude, currentLocation.latitude, currentLocation.height);
let resultPosition;
let resultDistance;
let counter = 0;
let distanceFactorRangeMax = 0.1;
let distanceFactorRangeMin = -0.1;
while (counter === 0 ||
(counter < 16 && Math.max(resultDistance, meterDistance) / Math.min(resultDistance, meterDistance) > 1.000001)) {
const factor = distanceFactorRangeMin + (distanceFactorRangeMax - distanceFactorRangeMin) / 2;
resultPosition = GeoUtilsService._pointByLocationDistanceAndAzimuth(cartographicLocation, distance * (1 + factor), radianAzimuth);
resultDistance = this.distance(cartesianLocation, resultPosition);
if (resultDistance > meterDistance) {
distanceFactorRangeMax = distanceFactorRangeMin + (distanceFactorRangeMax - distanceFactorRangeMin) / 2;
}
else {
distanceFactorRangeMin = distanceFactorRangeMin + (distanceFactorRangeMax - distanceFactorRangeMin) / 2;
}
counter++;
}
return resultPosition;
}
static _pointByLocationDistanceAndAzimuth(cartographicLocation, distance, radianAzimuth) {
const curLat = cartographicLocation.latitude;
const curLon = cartographicLocation.longitude;
const destinationLat = Math.asin(Math.sin(curLat) * Math.cos(distance) + Math.cos(curLat) * Math.sin(distance) * Math.cos(radianAzimuth));
let destinationLon = curLon +
Math.atan2(Math.sin(radianAzimuth) * Math.sin(distance) * Math.cos(curLat), Math.cos(distance) - Math.sin(curLat) * Math.sin(destinationLat));
destinationLon = ((destinationLon + 3 * Math.PI) % (2 * Math.PI)) - Math.PI;
return Cesium.Cartesian3.fromRadians(destinationLon, destinationLat);
}
static distance(pos0, pos1) {
return Cesium.Cartesian3.distance(pos0, pos1);
}
static getPositionsDelta(position0, position1) {
return {
x: position1.x - position0.x,
y: position1.y - position0.y,
z: position1.z - position0.z,
};
}
static addDeltaToPosition(position, delta, updateReference = false) {
if (updateReference) {
position.x += delta.x;
position.y += delta.y;
position.z += delta.z;
const cartographic = Cesium.Cartographic.fromCartesian(position);
cartographic.height = 0;
const cartesian = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
position.x = cartesian.x;
position.y = cartesian.y;
position.z = cartesian.z;
return position;
}
else {
const cartesian = new Cesium.Cartesian3(position.x + delta.x, position.y + delta.y, position.z + delta.z);
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
cartographic.height = 0;
return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
}
}
static middleCartesian3Point(position0, position1) {
return new Cesium.Cartesian3(position1.x - position0.x / 2, position1.y - position0.y / 2, position1.z - position0.z / 2);
}
screenPositionToCartesian3(screenPos) {
const camera = this.cesiumService.getViewer().camera;
return camera.pickEllipsoid(screenPos);
}
}
GeoUtilsService.decorators = [
{ type: Injectable }
];
GeoUtilsService.ctorParameters = () => [
{ type: CesiumService }
];
/**
+ This drawer is responsible for drawing an arc over the Cesium map.
+ This implementation uses simple PolylineGeometry and Primitive parameters.
+ This doesn't allow us to change the position, color, etc.. of the arc but setShow only.
*/
class ArcDrawerService extends PrimitivesDrawerService {
constructor(cesiumService) {
super(Cesium.PolylineCollection, cesiumService);
}
_calculateArcPositions(cesiumProps) {
const quality = cesiumProps.quality || 18;
const delta = (cesiumProps.delta) / quality;
const pointsArray = [];
for (let i = 0; i < quality + 1; ++i) {
const point = GeoUtilsService.pointByLocationDistanceAndAzimuth(cesiumProps.center, cesiumProps.radius, cesiumProps.angle + delta * i, true);
pointsArray.push(point);
}
return pointsArray;
}
_calculateTriangle(cesiumProps) {
return [
cesiumProps.center,
GeoUtilsService.pointByLocationDistanceAndAzimuth(cesiumProps.center, cesiumProps.radius, cesiumProps.angle, true)
];
}
_calculateArc(cesiumProps) {
const arcPoints = this._calculateArcPositions(cesiumProps);
return cesiumProps.drawEdges ? arcPoints.concat(this._calculateTriangle(cesiumProps)) : arcPoints;
}
add(cesiumProps) {
cesiumProps.positions = this._calculateArc(cesiumProps);
if (cesiumProps.color) {
const material = Cesium.Material.fromType('Color');
material.uniforms.color = cesiumProps.color;
cesiumProps.material = material;
}
return this._cesiumCollection.add(cesiumProps);
}
update(primitive, cesiumProps) {
if (!cesiumProps.constantColor && cesiumProps.color &&
!primitive.material.uniforms.color.equals(cesiumProps.color)) {
primitive.material.uniforms.color = cesiumProps.color;
}
primitive.width = cesiumProps.width !== undefined ? cesiumProps.width : primitive.width;
primitive.show = cesiumProps.show !== undefined ? cesiumProps.show : primitive.show;
primitive.distanceDisplayCondition = cesiumProps.distanceDisplayCondition !== u