drone_view 3.0.20 → 3.0.21

package/src/layers/polygon.ts

@@ -1,218 +0,0 @@
-import {
-  CustomDataSource,
-  HeadingPitchRange,
-  Math as cMath,
-  Cartesian3,
-} from "cesium";
-
-import type CesiumView from "../droneView";
-
-import { addPolyLineFilled, getPolygonEntity, addLabel, getPolygonCenter} from "../utility";
-
-import { PolygonData, PolygonOptions } from "../app.interface";
-
-/**
- * Use this class to create a marker layer
- * @extends {GenericLayer}
- * @param {MapBox} mapObject - The mapbox map object
- * @param {string} uniqueName - The unique name of the layer
- * @param {PolygonData[]} data - The data to be used in the layer
- * @param {PolygonOptions} options - The options for the layer (see {@link PolygonOptions})
- */
-export default class PolygonLayer {
-  polygonId: string;
-
-  uniqueName: string;
-
-  opacity: number;
-
-  mapObject: CesiumView;
-
-  options: PolygonOptions;
-
-  layer: CustomDataSource;
-
-  data: PolygonData[];
-
-  /**
-   * @param { CesiumView } mapObject  map object
-   * @param { string }uniqueName string unique name for the layer
-   * @param { PolygonData[] } data
-   * @param { PolygonOptions } options
-   */
-  constructor(
-    mapObject: CesiumView,
-    uniqueName: string,
-    data: PolygonData[],
-    options: PolygonOptions
-  ) {
-    this.polygonId = `Polygon-layer-${this.uniqueName}`;
-    this.data = data;
-    this.mapObject = mapObject;
-    this.uniqueName = uniqueName;
-    this.options = options;
-    this.opacity = 0;
-    if (this.options.opacity !== undefined) {
-      this.opacity = this.options.opacity;
-    }
-    this.buildLayer();
-    this.add(this.data).then(() => {
-      if (this.options.setBounds === undefined || this.options.setBounds) {
-        this.setBounds();
-      }
-      if (!this.options.isNoListener) this.addListeners();
-    });
-  }
-
-  /** To initialize layer */
-  public buildLayer(): void {
-    if (
-      this.mapObject.viewer.dataSources.getByName("polygon" + this.uniqueName)
-    ) {
-      this.mapObject.viewer.dataSources.remove(
-        this.mapObject.viewer.dataSources.getByName(
-          "polygon" + this.uniqueName
-        )[0],
-        true
-      );
-    }
-    this.layer = new CustomDataSource("polygon" + this.uniqueName);
-
-    this.mapObject.viewer.dataSources.add(this.layer);
-  }
-
-  /** To add layer on map */
-  public add(data: PolygonData[]) {
-    const self = this;
-    return new Promise<void>((resolve) => {
-      const loadCommands: any = [];
-      data.forEach((formData: PolygonData) => {
-        loadCommands.push(self.addToMap(formData));
-      });
-
-      Promise.all(loadCommands).then(() => {
-        this.mapObject.viewer.scene.requestRender();
-        resolve();
-      });
-    });
-  }
-
-  /**
-   * Add data on map
-   * @param { PolygonData } data
-   */
-  public addToMap(data: PolygonData) {
-    console.log(data.properties.label)
-    let positions = Cartesian3.fromDegreesArrayHeights(data.points.flat());
-    if (positions[0] !== positions[positions.length - 1]) {
-      positions = [...positions, positions[0]];
-    }
-    const line = addPolyLineFilled(
-      this.mapObject.viewer,
-      positions,
-      {
-        type: "LineString",
-        lineColor: data.properties.color || "#ff0000",
-        lineWidth: +data.properties.lineWidth || 3,
-        opacity: 1,
-        measurement: false
-      },
-      this.polygonId,
-      data.properties
-    );
-
-    this.layer.entities.add(line);
-
-    const polygon = getPolygonEntity(
-      positions,
-      this.polygonId,
-      +this.opacity,
-      data.properties,
-      true,
-      true
-    );
-
-    addLabel(this.mapObject.viewer, {
-      position: getPolygonCenter(positions),
-      text: data.properties.label,
-      id: data.properties.label
-    });
-
-    this.layer.entities.add(polygon);
-  }
-
-  /** to set map bouds fit with layer data */
-  public setBounds(): void {
-    const time = this.options.setBoundsInstant ? 0 : undefined;
-    this.mapObject.viewer.flyTo(this.layer.entities, {
-      duration: time,
-      offset: new HeadingPitchRange(
-        cMath.toRadians(this.mapObject.viewer.camera.heading),
-        -Math.PI / 2,
-        0
-      ),
-    });
-  }
-
-  /**
-   * Sets opacity of the layer
-   * @param opacity number between 0-1
-   */
-  public setOpacity(opacity: number): void {
-    this.opacity = opacity;
-    this.buildLayer();
-    this.add(this.data);
-  }
-
-  public addListeners() {
-    this.mapObject.addLayerListener("click", this.polygonId, (event: any) => {
-      if (this.options.onClick) {
-        this.options.onClick(event);
-      }
-    });
-
-    this.mapObject.addLayerListener(
-      "mousemove",
-      this.polygonId,
-      (event: any) => {
-        this.mapObject.viewer.canvas.style.cursor = "pointer";
-      }
-    );
-
-    this.mapObject.addLayerListener(
-      "mouseenter",
-      this.polygonId,
-      (event: any) => {
-        this.mapObject.viewer.canvas.style.cursor = "pointer";
-      }
-    );
-
-    this.mapObject.addLayerListener("mouseout", this.polygonId, () => {
-      this.mapObject.viewer.canvas.style.cursor = "";
-    });
-  }
-
-  /** Removes all listeners added by this layer */
-  public removeListeners() {
-    this.mapObject.removeLayerListeners(this.polygonId);
-  }
-
-  /** Remove layer from map and destroy layer */
-  public remove(): void {
-    this.mapObject.viewer.dataSources.remove(this.layer, true);
-    this.removeListeners();
-    this.mapObject.viewer.scene.requestRender();
-  }
-
-  show() {
-    this.layer.entities.show = true;
-    this.mapObject.viewer.entities.show = true;
-    this.mapObject.viewer.scene.requestRender();
-  }
-
-  hide() {
-    this.layer.entities.show = false;
-    this.mapObject.viewer.entities.show = false
-    this.mapObject.viewer.scene.requestRender();
-  }
-}

package/src/measurement.ts

@@ -1,374 +0,0 @@
-import {
-  CallbackProperty,
-  Cartesian3,
-  defined,
-  PolygonHierarchy,
-  ScreenSpaceEventHandler,
-  ScreenSpaceEventType,
-  Color,
-  Entity,
-  Viewer,
-  SceneMode,
-  Polyline,
-} from "cesium";
-import type { Mode, DrawingConfig, DrawResponse } from "./app.interface";
-import * as Utility from "./utility";
-
-export default class Measurement {
-  private handler: ScreenSpaceEventHandler;
-
-  private isHover: boolean = true;
-
-  private activeShape: any;
-
-  private activeShapePoints: any = [];
-
-  private config: DrawingConfig = {
-    type: "Polygon",
-    lineColor : "#ff0000",
-    strokeColor: "#ff0000",
-    measurement: false
-  };
-
-  private selectedPoints: Array<boolean>;
-
-  private previewPoint: Entity | undefined;
-
-  private measurementValue: number | undefined;
-
-  constructor(private viewer: Viewer) {
-    this.handler = new ScreenSpaceEventHandler(viewer.canvas);
-  }
-
-  /**
-   * This function is for adding distance value between each points
-   * @param arrayOfVert - Array of Cartesian
-   * @param id Id of main geometry
-   */
-  private addLabels(arrayOfVert: Array<Cartesian3>, id: string) {
-    for (let i = 0; i < arrayOfVert.length; i += 1) {
-      if (arrayOfVert[i] && arrayOfVert[i + 1]) {
-        const distance = Utility.distance3D([
-          arrayOfVert[i],
-          arrayOfVert[i + 1],
-        ]);
-        if (distance > 0.01) {
-          Utility.addLabel(this.viewer, {
-            id: `${id}-label-${i}`,
-            position: Utility.getMidPoint(arrayOfVert[i], arrayOfVert[i + 1]),
-            text: `${distance.toFixed(2).toString()} m`,
-          });
-        }
-      }
-    }
-  }
-
-  private getMeasurement(arrayOfVert: Array<Cartesian3>, id: string) {
-    for (let i = 0; i < arrayOfVert.length; i += 1) {
-      if (arrayOfVert[i] && arrayOfVert[i + 1]) {
-        const distance = Utility.distance3D([
-          arrayOfVert[i],
-          arrayOfVert[i + 1],
-        ]);
-        return distance;
-      }
-    }
-  }
-  /**
-   * This function is for removing distance value between each points
-   * @param arrayOfVert - Array of Cartesian
-   * @param id - id of main geometry
-   */
-  private removeLabels(arrayOfVert: Array<Cartesian3>, id: string) {
-    for (let i = 0; i < arrayOfVert.length; i += 1) {
-      if (this.viewer.entities.getById(`${id}-${i}`)) {
-        this.viewer.entities.remove(
-          this.viewer.entities.getById(`${id}-label-${i}`)!
-        );
-      }
-    }
-  }
-
-  /**
-   * This function is for finishing the measurement
-   */
-  private finishGeometry(): void {
-    this.viewer.canvas.style.cursor = "default";
-    // if(this.config.type === 'Point') this.activeShapePoints.pop();
-    let entity;
-
-    if (this.config.type === "Polygon") {
-      this.activeShapePoints.pop();
-      // entity = Utility.addPolygon(this.viewer, this.activeShapePoints as any, {
-      //   ...this.config,
-      //   id: this.activeShape.id,
-      // });
-      // // For dashed outline on polygon
-      // Utility.addPolyLine(
-      //   this.viewer,
-      //   [...this.activeShapePoints, this.activeShapePoints[0]],
-      //   { ...this.config, id: `${this.activeShape.id}-Line` }
-      // );
-
-      entity = Utility.addPolyLine(this.viewer, [...this.activeShapePoints, this.activeShapePoints[0]], {
-        ...this.config,
-        //clamp: false,
-      }, false);
-
-      this.viewer.scene.requestRender();
-    } else if (this.config.type === "LineString") {
-      this.activeShapePoints.pop();
-      this.measurementValue = this.getMeasurement(this.activeShapePoints, this.activeShape.id);
-      entity = Utility.addPolyLine(this.viewer, this.activeShapePoints, {
-        ...this.config,
-        id: this.activeShape?.id,
-        // clamp: false
-      });
-    } else if (this.config.type === "Cross-Section") {
-      entity = Utility.addPolyLine(this.viewer, this.activeShapePoints, {
-        ...this.config,
-        id: this.activeShape?.id,
-        clamp: true
-      }, false);
-    } else {
-      entity = Utility.addPoint(this.viewer, this.activeShapePoints[0]);
-    }
-
-    if (this.drawingFinished) {
-      this.drawingFinished({
-        id: entity.id,
-        object: Utility.cartesianToGeojson(
-          this.activeShapePoints,
-          this.config.type,
-          this.measurementValue ? {measurement: this.measurementValue} : undefined
-        ),
-      }); // to responded after drawing finished
-    }
-    this.activeShape = undefined;
-    this.activeShapePoints = [];
-    if (this.previewPoint) {
-      this.viewer.entities.remove(this.previewPoint);
-    }
-
-    this.previewPoint = undefined;
-  }
-
-  // Callback function to respond data after drawing
-  public drawingFinished: (drawResponse: DrawResponse) => void;
-
-  /**
-   * This Function is for get position while mouse is moving on map
-   * @param movement - Mouse window position object contains x,y
-   */
-  private previewGeometry(movement: any) {
-    const earthPosition = Utility.screenToWorldPosition(
-      this.viewer,
-      movement.endPosition
-    )?.position;
-
-    if (defined(earthPosition) && this.config.type === "Point") {
-      this.previewPoint = Utility.addPoint(
-        this.viewer,
-        earthPosition,
-        "Preview-Point"
-      );
-    }
-
-    if (this.activeShapePoints.length > 0 && defined(earthPosition)) {
-      this.activeShapePoints.pop();
-      this.activeShapePoints.push(earthPosition);
-
-      // if (this.previewPoint && this.config.type === "Point") {
-      //   (this.previewPoint as any).position._value = earthPosition as any;
-      // }
-    }
-
-    this.viewer.scene.requestRender();
-  }
-
-  /**
-   * To add geometry on map
-   * @param positions Array of positions (Cartesian)
-   * @returns Entity
-   */
-  private addGeometryOnMap(positions: any) {
-    let entity;
-    switch (this.config.type) {
-      case "LineString":
-        if (this.config.measurement) {
-          entity = Utility.addPolyLine(this.viewer, positions, {...this.config, clamp: false});
-        }
-        else {
-          entity = Utility.addPolyLine(this.viewer, positions, {...this.config, id: this.activeShape?.id});
-        }
-        break;
-      case "Cross-Section":
-        entity = Utility.addPolyLine(this.viewer, positions, {
-          ...this.config,
-          clamp: true,
-        }, false);
-        break;
-      case "Polygon":
-        entity = Utility.addPolyLine(this.viewer, positions, {
-          ...this.config,
-          //clamp: true,
-        }, false);
-      //   entity = Utility.addPolygon(this.viewer, positions, this.config);
-      //   Utility.addPolyLine(
-      //     this.viewer,
-      //     new CallbackProperty(() => this.activeShapePoints, false) as any,
-      //     this.config
-      //   );
-        break;
-      default:
-    }
-    return entity;
-  }
-
-  /**
-   * This function is for adding positions while user is drawing
-   * User can click left button to add more point into geometry
-   * @param movement - Mouse screen position object
-   */
-  private intermediateGeometry(movement: any) {
-    this.viewer.canvas.style.cursor = "crosshair";
-
-    if (this.previewPoint) {
-      this.viewer.entities.remove(this.previewPoint);
-    }
-
-    this.previewPoint = undefined;
-
-    
-
-    const result = Utility.screenToWorldPosition(
-      this.viewer,
-      movement.position
-    );
-
-    if(result?.id?.billboard){
-      this.finishGeometry();
-      return;
-    }
-    
-
-    const earthPosition = result?.position;
-      
-
-    const self = this;
-    if (defined(earthPosition)) {
-      if (this.activeShapePoints.length === 0) {
-        this.activeShapePoints.push(earthPosition);
-        if (self.config.type === "Point") {
-          this.finishGeometry();
-          return;
-        }
-        const dynamicPositions: any = new CallbackProperty(() => {
-          if (self.config.type === "Polygon") {
-            return [...self.activeShapePoints,self.activeShapePoints[0]];
-          }
-          return self.activeShapePoints;
-        }, false);
-        this.activeShape = this.addGeometryOnMap(dynamicPositions);
-      }
-      this.activeShapePoints.push(earthPosition);
-      
-      if(this.config.type === "LineString"){
-        this.activeShape = this.addGeometryOnMap(this.activeShapePoints);
-      }
-
-      if (this.activeShape) {
-        Utility.addPoint(
-          this.viewer,
-          earthPosition,
-          `${this.activeShape.id}-${(
-            this.activeShapePoints.length - 1
-          ).toString()}`
-        );
-      }
-
-      if (self.config.type === "LineString") {
-        this.addLabels(this.activeShapePoints, this.activeShape.id);
-      }
-
-      if (self.config.type === "Cross-Section") {
-        if (this.activeShapePoints.length > 2) {
-          this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE);
-          const allPointsAlongLine = Utility.getPositionsByFixDistance(
-            this.activeShapePoints[0],
-            this.activeShapePoints[1]
-          );
-          this.viewer.scene
-            .sampleHeightMostDetailed(
-              this.viewer.scene.globe.ellipsoid.cartesianArrayToCartographicArray(
-                allPointsAlongLine
-              )
-            )
-            .then((f) => {
-              this.activeShapePoints =
-                this.viewer.scene.globe.ellipsoid.cartographicArrayToCartesianArray(
-                  f
-                );
-              Utility.addLabel(this.viewer, {
-                position:
-                  this.activeShapePoints[
-                    Math.floor(this.activeShapePoints.length / 2)
-                  ],
-                text: `${Utility.distance3D(
-                  this.viewer.scene.globe.ellipsoid.cartographicArrayToCartesianArray(
-                    f
-                  )
-                )
-                  .toFixed(2)
-                  .toString()} m`,
-              });
-              this.finishGeometry();
-            });
-        }
-      }
-    }
-
-    this.viewer.scene.requestRender();
-  }
-
-  /**
-   * To enable measurement mode
-   * @param config - DrawingConfig
-   */
-  public enable(config: DrawingConfig) {
-    this.isHover = false;
-    this.config = config;
-    this.handler.setInputAction(
-      this.previewGeometry.bind(this),
-      ScreenSpaceEventType.MOUSE_MOVE
-    );
-    this.handler.setInputAction(
-      this.intermediateGeometry.bind(this),
-      ScreenSpaceEventType.LEFT_CLICK
-    );
-  }
-
-  /**
-   * To disable measurement mode
-   */
-  public disable() {
-    const previewPointId = this.previewPoint?.id;
-    if (previewPointId) {
-      this.viewer.entities.removeById(previewPointId);
-      this.viewer.scene.requestRender();
-    }
-    this.isHover = true;
-    this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE);
-    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
-    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-  }
-
-  /**
-   * To assign dynamic color based on selection while editing the drawn geometry
-   * @param index - Index of position
-   * @returns - Method will return Color
-   */
-  private getColor(index: number) {
-    return this.selectedPoints[index] ? Color.CYAN : Color.WHITE;
-  }
-}