File

projects/angular-cesium/src/lib/angular-cesium-widgets/models/editable-ellipse.ts

Extends

AcEntity

Index

Properties
Methods
Accessors

Constructor

constructor(id: string, ellipsesLayer: AcLayerComponent, pointsLayer: AcLayerComponent, coordinateConverter: CoordinateConverter, options: EllipseEditOptions)
Parameters :
Name Type Optional
id string No
ellipsesLayer AcLayerComponent No
pointsLayer AcLayerComponent No
coordinateConverter CoordinateConverter No
options EllipseEditOptions No

Properties

Private _center
_center: EditPoint
Type : EditPoint
Private _ellipseProps
_ellipseProps: EllipseProps
Type : EllipseProps
Private _enableEdit
_enableEdit:
Default value : true
Private _labels
_labels: LabelProps[]
Type : LabelProps[]
Default value : []
Private _majorRadius
_majorRadius: number
Type : number
Private _majorRadiusPoint
_majorRadiusPoint: EditPoint
Type : EditPoint
Private _minorRadius
_minorRadius: number
Type : number
Private _minorRadiusPoints
_minorRadiusPoints: EditPoint[]
Type : EditPoint[]
Default value : []
Private _pointProps
_pointProps: PointProps
Type : PointProps
Private _polylineProps
_polylineProps: PolylineProps
Type : PolylineProps
Private _rotation
_rotation: number
Type : number
Default value : 0
Private doneCreation
doneCreation:
Default value : false
Private lastDraggedToPosition
lastDraggedToPosition: any
Type : any

Methods

addLastPoint
addLastPoint(position: Cartesian3)
Parameters :
Name Type Optional
position Cartesian3 No
Returns : void
addPoint
addPoint(position: Cartesian3)
Parameters :
Name Type Optional
position Cartesian3 No
Returns : void
dispose
dispose()
Returns : void
endMoveEllipse
endMoveEllipse()
Returns : void
getCenter
getCenter()
Returns : Cartesian3
getCenterCallbackProperty
getCenterCallbackProperty()
Returns : any
getId
getId()
Returns : string
getMajorRadius
getMajorRadius()
Returns : number
getMajorRadiusCallbackProperty
getMajorRadiusCallbackProperty()
Returns : any
getMajorRadiusPointPosition
getMajorRadiusPointPosition()
Returns : any
getMinorRadius
getMinorRadius()
Returns : number
getMinorRadiusCallbackProperty
getMinorRadiusCallbackProperty()
Returns : any
getMinorRadiusPointPosition
getMinorRadiusPointPosition()
Returns : Cartesian3
getRotation
getRotation()
Returns : number
getRotationCallbackProperty
getRotationCallbackProperty()
Returns : any
moveEllipse
moveEllipse(dragStartPosition: Cartesian3, dragEndPosition: Cartesian3)
Parameters :
Name Type Optional
dragStartPosition Cartesian3 No
dragEndPosition Cartesian3 No
Returns : void
movePoint
movePoint(toPosition: Cartesian3, editPoint: EditPoint)
Parameters :
Name Type Optional
toPosition Cartesian3 No
editPoint EditPoint No
Returns : void
setManually
setManually(center: Cartesian3, majorRadius: number, rotation, minorRadius?: number, centerPointProp, radiusPointProp, ellipseProp)
Parameters :
Name Type Optional Default value
center Cartesian3 No
majorRadius number No
rotation No Math.PI / 2
minorRadius number Yes
centerPointProp No this.pointProps
radiusPointProp No this.pointProps
ellipseProp No this.ellipseProps
Returns : void
transformToEllipse
transformToEllipse()
Returns : void
Private updateEllipsesLayer
updateEllipsesLayer()
Returns : void
Private updateMinorRadiusEditPoints
updateMinorRadiusEditPoints()
Returns : void
Private updatePointsLayer
updatePointsLayer()
Returns : void
updateRotation
updateRotation()
Returns : number
Static create
create(json?: any)
Inherited from AcEntity
Defined in AcEntity:18

Creates entity from a json

Parameters :
Name Type Optional Description
json any Yes

entity object

Returns : any

entity as AcEntity

Accessors

labels
getlabels()
setlabels(labels: [])
Parameters :
Name Type Optional
labels [] No
Returns : void
polylineProps
getpolylineProps()
setpolylineProps(value)
Parameters :
Name Optional
value No
Returns : void
pointProps
getpointProps()
setpointProps(value)
Parameters :
Name Optional
value No
Returns : void
ellipseProps
getellipseProps()
setellipseProps(value)
Parameters :
Name Optional
value No
Returns : void
center
getcenter()
majorRadiusPoint
getmajorRadiusPoint()
enableEdit
getenableEdit()
setenableEdit(value: boolean)
Parameters :
Name Type Optional
value boolean No
Returns : void
import { AcEntity } from '../../angular-cesium/models/ac-entity';
import { EditPoint } from './edit-point';
import { AcLayerComponent } from '../../angular-cesium/components/ac-layer/ac-layer.component';
import { Cartesian3 } from '../../angular-cesium/models/cartesian3';
import { GeoUtilsService } from '../../angular-cesium/services/geo-utils/geo-utils.service';
import { EllipseEditOptions, EllipseProps } from './ellipse-edit-options';
import { PointProps } from './point-edit-options';
import { PolylineProps } from './polyline-edit-options';
import { defaultLabelProps, LabelProps } from './label-props';
import { CoordinateConverter } from '../../angular-cesium/services/coordinate-converter/coordinate-converter.service';

export class EditableEllipse extends AcEntity {
  private _center: EditPoint;
  private _majorRadiusPoint: EditPoint;
  private _majorRadius: number;
  private _minorRadius: number;
  private _rotation = 0;
  private doneCreation = false;
  private _enableEdit = true;
  private _minorRadiusPoints: EditPoint[] = [];
  private lastDraggedToPosition: any;
  private _ellipseProps: EllipseProps;
  private _pointProps: PointProps;
  private _polylineProps: PolylineProps;
  private _labels: LabelProps[] = [];

  constructor(
    private id: string,
    private ellipsesLayer: AcLayerComponent,
    private pointsLayer: AcLayerComponent,
    private coordinateConverter: CoordinateConverter,
    private options: EllipseEditOptions,
  ) {
    super();
    this._ellipseProps = {...options.ellipseProps};
    this._pointProps = {...options.pointProps};
  }

  get labels(): LabelProps[] {
    return this._labels;
  }

  set labels(labels: LabelProps[]) {
    if (!labels || !this._center) {
      return;
    }
    this._labels = labels.map((label, index) => {
      if (!label.position) {
        if (index === 0) {
          label.position = this._center.getPosition();
        } else if (index === 1) {
          label.position = this._majorRadiusPoint
            ? Cesium.Cartesian3.midpoint(this.getCenter(), this._majorRadiusPoint.getPosition(), new Cesium.Cartesian3())
            : new Cesium.Cartesian3();
        } else if (index === 2) {
          label.position =
            this._minorRadiusPoints.length > 0 && this._minorRadius
              ? Cesium.Cartesian3.midpoint(this.getCenter(), this.getMinorRadiusPointPosition(), new Cesium.Cartesian3())
              : new Cesium.Cartesian3();
        }
      }

      return Object.assign({}, defaultLabelProps, label);
    });
  }

  get polylineProps(): PolylineProps {
    return this._polylineProps;
  }

  set polylineProps(value: PolylineProps) {
    this._polylineProps = value;
  }

  get pointProps(): PointProps {
    return this._pointProps;
  }

  set pointProps(value: PointProps) {
    this._pointProps = value;
  }

  get ellipseProps(): EllipseProps {
    return this._ellipseProps;
  }

  set ellipseProps(value: EllipseProps) {
    this._ellipseProps = value;
  }

  get center(): EditPoint {
    return this._center;
  }

  get majorRadiusPoint(): EditPoint {
    return this._majorRadiusPoint;
  }

  getMajorRadiusPointPosition() {
    if (!this._majorRadiusPoint) {
      return undefined;
    }

    return this._majorRadiusPoint.getPosition();
  }

  getMinorRadiusPointPosition(): Cartesian3 {
    if (this._minorRadiusPoints.length < 1) {
      return undefined;
    }

    return this._minorRadiusPoints[0].getPosition();
  }

  get enableEdit() {
    return this._enableEdit;
  }

  set enableEdit(value: boolean) {
    this._enableEdit = value;
    this._center.show = value;
    this._majorRadiusPoint.show = value;
    this.updatePointsLayer();
  }

  setManually(
    center: Cartesian3,
    majorRadius: number,
    rotation = Math.PI / 2,
    minorRadius?: number,
    centerPointProp = this.pointProps,
    radiusPointProp = this.pointProps,
    ellipseProp = this.ellipseProps,
  ) {
    if (majorRadius < minorRadius) {
      throw new Error('Major radius muse be equal or greater than minor radius');
    }
    this._rotation = rotation;
    this._majorRadius = majorRadius;
    if (!this._center) {
      this._center = new EditPoint(this.id, center, centerPointProp);
    } else {
      this._center.setPosition(center);
    }

    const majorRadiusPosition = GeoUtilsService.pointByLocationDistanceAndAzimuth(this.center.getPosition(), majorRadius, rotation);

    if (!this._majorRadiusPoint) {
      this._majorRadiusPoint = new EditPoint(this.id, majorRadiusPosition, radiusPointProp);
    } else {
      this._majorRadiusPoint.setPosition(majorRadiusPosition);
    }

    if (minorRadius) {
      this._minorRadius = minorRadius;
    }

    this.ellipseProps = ellipseProp;
    this.doneCreation = true;
    this.updateMinorRadiusEditPoints();
    this.updatePointsLayer();
    this.updateEllipsesLayer();
  }

  addPoint(position: Cartesian3) {
    if (this.doneCreation) {
      return;
    }

    if (!this._center) {
      this._center = new EditPoint(this.id, position, this.pointProps);
      this._majorRadiusPoint = new EditPoint(this.id, position.clone(), this.pointProps);
      this._majorRadius = 0;
    }

    this.updateRotation();
    this.updateMinorRadiusEditPoints();
    this.updatePointsLayer();
    this.updateEllipsesLayer();
  }

  transformToEllipse() {
    if (this._minorRadius) {
      return;
    }

    this._minorRadius = this.getMajorRadius();
    this.updateMinorRadiusEditPoints();
    this.updatePointsLayer();
    this.updateEllipsesLayer();
  }

  addLastPoint(position: Cartesian3) {
    if (this.doneCreation || !this._center || !this._majorRadiusPoint) {
      return;
    }

    const newRadius = GeoUtilsService.distance(this._center.getPosition(), position);
    this._majorRadiusPoint.setPosition(position);
    this._majorRadius = newRadius;
    this.doneCreation = true;

    if (!this.options.circleToEllipseTransformation) {
      this._minorRadius = this._majorRadius;
    }

    this.updateRotation();
    this.updateMinorRadiusEditPoints();
    this.updatePointsLayer();
    this.updateEllipsesLayer();
  }

  movePoint(toPosition: Cartesian3, editPoint: EditPoint) {
    if (!this._center || !this._majorRadiusPoint) {
      return;
    }

    const newRadius = GeoUtilsService.distance(this._center.getPosition(), toPosition);
    if (this.majorRadiusPoint === editPoint) {
      if (newRadius < this._minorRadius) {
        this._majorRadius = this._minorRadius;
        this._majorRadiusPoint.setPosition(
          GeoUtilsService.pointByLocationDistanceAndAzimuth(this.getCenter(), this._minorRadius, this._rotation),
        );
      } else {
        this.majorRadiusPoint.setPosition(toPosition);
        this._majorRadius = newRadius;
      }
    } else {
      if (newRadius > this._majorRadius) {
        this._minorRadius = this._majorRadius;
      } else {
        this._minorRadius = newRadius;
      }
    }

    this.updateRotation();
    this.updateMinorRadiusEditPoints();
    this.updatePointsLayer();
    this.updateEllipsesLayer();
  }

  moveEllipse(dragStartPosition: Cartesian3, dragEndPosition: Cartesian3) {
    if (!this.doneCreation) {
      return;
    }
    if (!this.lastDraggedToPosition) {
      this.lastDraggedToPosition = dragStartPosition;
    }

    const majorRadius = this.getMajorRadius();
    const rotation = this.getRotation();
    const delta = GeoUtilsService.getPositionsDelta(this.lastDraggedToPosition, dragEndPosition);
    const newCenterPosition = GeoUtilsService.addDeltaToPosition(this.getCenter(), delta, true);
    this._center.setPosition(newCenterPosition);
    this.majorRadiusPoint.setPosition(GeoUtilsService.pointByLocationDistanceAndAzimuth(this.getCenter(), majorRadius, rotation));
    this.updatePointsLayer();
    this.updateMinorRadiusEditPoints();
    this.updateEllipsesLayer();
    this.lastDraggedToPosition = dragEndPosition;
  }

  endMoveEllipse() {
    this.lastDraggedToPosition = undefined;
  }

  private updateMinorRadiusEditPoints() {
    if (this._minorRadius === undefined) {
      return;
    }
    if (this._minorRadiusPoints.length === 0) {
      this._minorRadiusPoints.push(new EditPoint(this.id, new Cesium.Cartesian3(), this.pointProps, true));
      this._minorRadiusPoints.push(new EditPoint(this.id, new Cesium.Cartesian3(), this.pointProps, true));
    }

    this._minorRadiusPoints[0].setPosition(
      GeoUtilsService.pointByLocationDistanceAndAzimuth(this._center.getPosition(), this._minorRadius, this.getRotation() - Math.PI / 2),
    );

    this._minorRadiusPoints[1].setPosition(
      GeoUtilsService.pointByLocationDistanceAndAzimuth(this._center.getPosition(), this._minorRadius, this.getRotation() + Math.PI / 2),
    );
  }

  getMajorRadius(): number {
    return this._majorRadius || 0;
  }

  getMinorRadius() {
    if (this._minorRadius === undefined) {
      return this.getMajorRadius();
    } else {
      return this._minorRadius;
    }
  }

  getRotation(): number {
    return this._rotation || 0;
  }

  updateRotation(): number {
    if (!this._majorRadiusPoint) {
      return 0;
    }

    const azimuthInDegrees = this.coordinateConverter.bearingToCartesian(this.getCenter(), this._majorRadiusPoint.getPosition());
    this._rotation = Cesium.Math.toRadians(azimuthInDegrees);
    return this._rotation;
  }

  getRotationCallbackProperty() {
    return new Cesium.CallbackProperty(() => Math.PI / 2 - this.getRotation(), false);
  }

  getMinorRadiusCallbackProperty() {
    return new Cesium.CallbackProperty(() => this.getMinorRadius(), false);
  }

  getMajorRadiusCallbackProperty() {
    return new Cesium.CallbackProperty(() => this.getMajorRadius(), false);
  }

  getCenter(): Cartesian3 {
    return this._center ? this._center.getPosition() : undefined;
  }

  getCenterCallbackProperty() {
    return new Cesium.CallbackProperty(() => this.getCenter(), false);
  }

  dispose() {
    if (this._center) {
      this.pointsLayer.remove(this._center.getId());
    }

    if (this._majorRadiusPoint) {
      this.pointsLayer.remove(this._majorRadiusPoint.getId());
    }

    if (this._minorRadiusPoints) {
      this._minorRadiusPoints.forEach(point => this.pointsLayer.remove(point.getId()));
    }

    this.ellipsesLayer.remove(this.id);
  }

  getId() {
    return this.id;
  }

  private updateEllipsesLayer() {
    this.ellipsesLayer.update(this, this.id);
  }

  private updatePointsLayer() {
    if (this._center) {
      this.pointsLayer.update(this._center, this._center.getId());
    }
    if (this._majorRadiusPoint) {
      this.pointsLayer.update(this._majorRadiusPoint, this._majorRadiusPoint.getId());
    }
    if (this._minorRadiusPoints.length > 0) {
      this.pointsLayer.update(this._minorRadiusPoints[0], this._minorRadiusPoints[0].getId());
      this.pointsLayer.update(this._minorRadiusPoints[1], this._minorRadiusPoints[1].getId());
    }
  }
}

result-matching ""

    No results matching ""