drone_view 3.0.18 → 3.0.20

package/src/layers/polygon.ts

@@ -0,0 +1,218 @@
+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

@@ -0,0 +1,374 @@
+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;
+  }
+}