drone_view 3.0.18 → 3.0.20

package/src/layers/editPolygon.ts

@@ -0,0 +1,511 @@
+import {
+  CallbackProperty,
+  Color,
+  Cartesian3,
+  CustomDataSource,
+  Entity,
+  Math as cMath,
+  HeadingPitchRange,
+  PolygonHierarchy,
+  PolylineDashMaterialProperty,
+  sampleTerrainMostDetailed,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  HeightReference,
+  VerticalOrigin,
+  Cartographic,
+} from "cesium";
+
+import { Point, PolygonData, PolygonOptions } from "../app.interface";
+
+import type CesiumView from "../droneView";
+
+import {
+  cartesianArrayToPointArray,
+  cartesianToPoint,
+  getMidPoint,
+  pointArrayToCartesianArray,
+  screenToWorldPosition,
+} from "../utility";
+
+/**
+ * @param {CesiumView} mapObject - The viewer 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)
+ */
+export default class EditPolygon {
+  editLayerId: string;
+
+  pointLayer: CustomDataSource;
+
+  lineLayer: CustomDataSource;
+
+  verticsPostions: any = [];
+
+  sideCenterPositions: Cartesian3[] = [];
+
+  verticesSelected: boolean[];
+
+  selectedIndex: number = -1;
+
+  selectedAnnotationID: string | number | null;
+
+  selectedPointID: string | number | null;
+
+  pointWasDragged: boolean;
+
+  mapWasMoved: boolean;
+
+  mouseOverEntity: any | null;
+
+  opacity: number = 0.0;
+
+  handler: ScreenSpaceEventHandler;
+
+  /**
+   * @param { CesiumView } mapObject  map object
+   * @param { string }uniqueName string unique name for the layer
+   * @param { PolygonData } data
+   * @param { PolygonOptions } options
+   */
+  constructor(
+    public mapObject: CesiumView,
+    public uniqueName: string,
+    public data: PolygonData,
+    public options: PolygonOptions
+  ) {
+    this.editLayerId = `polygon-edit-layer-${this.uniqueName}`;
+    this.opacity = 0.0;
+    this.buildLayer();
+    this.add(this.data);
+    if (this.options.setBounds === undefined || this.options.setBounds) {
+      this.setBounds();
+    }
+    this.addListeners();
+  }
+
+  /** To initialize layer */
+  public buildLayer(): void {
+    if (
+      this.mapObject.viewer.dataSources.getByName(
+        "polygon-edit-Point-" + this.uniqueName
+      )
+    ) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "polygon-edit-Point-" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+
+    this.pointLayer = new CustomDataSource(
+      `polygon-edit-Point-${this.editLayerId}`
+    );
+
+    this.mapObject.viewer.dataSources.add(this.pointLayer);
+
+    if (
+      this.mapObject.viewer.dataSources.getByName(
+        "polygon-edit-Line-" + this.uniqueName
+      )
+    ) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "polygon-edit-Line-" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+
+    this.lineLayer = new CustomDataSource(
+      `polygon-edit-Line-${this.editLayerId}`
+    );
+
+    this.mapObject.viewer.dataSources.add(this.lineLayer);
+  }
+
+  /** To add layer on map */
+  public add(data: PolygonData) {
+    //   const self = this;
+    //   let positions = Cartesian3.fromDegreesArrayHeights(data.points.flat());
+    //   if (positions[0] !== positions[positions.length - 1]) {
+    //     positions = [...positions, positions[0]];
+    //   }
+
+    //   self.verticsPostions = positions;
+    //   self.verticesSelected = new Array(positions.length).fill(false);
+
+    //   const dynamicPositions: any = new CallbackProperty(
+    //     () => new PolygonHierarchy(self.verticsPostions),
+    //     false
+    //   );
+
+    //   this.updateVerticesPoints();
+
+    //   const line = {
+    //     polyline: {
+    //       positions: new CallbackProperty(() => [...self.verticsPostions], false),
+    //       width: 4,
+    //       material: Color.fromCssColorString("#FF0000"),
+    //       clampToGround: true,
+    //     },
+    //   };
+
+    //   this.lineLayer.entities.add(line);
+    // }
+
+    // /**
+    //  * Add data on map
+    //  * @param { FreeformData } data
+    //  */
+    //   public addToMap(data: PolygonData) {
+    const self = this;
+    //     let zOffset = 0;
+
+    //     if (this.mapObject.layers.freeform) {
+    //       zOffset = this.mapObject.layers.freeform.length;
+    //     }
+
+    return new Promise<void>((resolve) => {
+      const cartesianPositions = pointArrayToCartesianArray(data.points);
+      const cartographicPositions =
+        this.mapObject.viewer.scene.globe.ellipsoid.cartesianArrayToCartographicArray(
+          cartesianPositions
+        );
+      this.mapObject.viewer.scene
+        .sampleHeightMostDetailed(cartographicPositions)
+        .then((pos) => {
+          let positions =
+            this.mapObject.viewer.scene.globe.ellipsoid.cartographicArrayToCartesianArray(
+              pos
+            );
+
+          if (positions[0] !== positions[positions.length - 1]) {
+            positions = [...positions, positions[0]];
+          }
+
+          self.verticsPostions = positions;
+          self.verticesSelected = new Array(positions.length).fill(false);
+
+          // const dynamicPositions: any = new CallbackProperty(
+          //   () => new PolygonHierarchy(self.verticsPostions),
+          //   false
+          // );
+
+          this.updateVerticesPoints();
+          // this.updateNonVeticesPoints();
+
+          const line = {
+            polyline: {
+              positions: new CallbackProperty(
+                () => [...self.verticsPostions],
+                false
+              ),
+              width: 4,
+              material: Color.fromCssColorString("#FF0000"),
+              clampToGround: true,
+            },
+          };
+
+          this.lineLayer.entities.add(line);
+
+          resolve();
+        });
+    });
+  }
+
+  /** to set map bouds fit with layer data */
+  public setBounds(): void {
+    const time = this.options.setBoundsInstant ? 0 : undefined;
+    this.mapObject.viewer.flyTo(this.lineLayer.entities, {
+      duration: time,
+      offset: new HeadingPitchRange(
+        cMath.toRadians(this.mapObject.viewer.camera.heading),
+        -Math.PI / 2,
+        0
+      ),
+    });
+  }
+
+  updateVerticesPoints(isDepth?: boolean) {
+    this.pointLayer.entities.values.forEach((entity: any, i: number) => {
+      if (entity.type === "main") {
+        // this.pointLayer.entities.remove(entity);
+        entity.position = this.verticsPostions[i];
+        entity.billboard.disableDepthTestDistance = isDepth
+          ? Number.POSITIVE_INFINITY
+          : undefined;
+        this.mapObject.viewer.scene.requestRender();
+      }
+    });
+
+    if (this.pointLayer.entities.values.length > 2) {
+      return;
+    }
+
+    const svg = `<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="10" cy="10" r="8.5" stroke="red" stroke-width="1.5" fill="whiteSmoke" />
+  </svg>`;
+
+    console.log(this.verticsPostions.length);
+
+    this.verticsPostions.forEach((position: Cartesian3) => {
+      const pointMain = {
+        position,
+        billboard: {
+          image: `data:image/svg+xml;base64,${window.btoa(svg)}`,
+          verticalOrigin: VerticalOrigin.CENTER,
+          eyeOffset: new Cartesian3(0, 0, -10),
+          disableDepthTestDistance: isDepth
+            ? Number.POSITIVE_INFINITY
+            : undefined,
+        },
+        type: "main",
+      };
+      this.mapObject.viewer.scene.requestRender();
+
+      this.pointLayer.entities.add(pointMain);
+    });
+
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** Add all listeners for layer */
+  public addListeners() {
+    this.handler = new ScreenSpaceEventHandler(this.mapObject.viewer.canvas);
+    this.handler.setInputAction(
+      this.mouseMoveHandler.bind(this),
+      ScreenSpaceEventType.MOUSE_MOVE
+    );
+
+    this.handler.setInputAction(
+      this.mouseMoveHandler.bind(this),
+      ScreenSpaceEventType.PINCH_MOVE
+    );
+  }
+
+  mouseMoveHandler(event: any) {
+    if (!event.endPosition) {
+      return;
+    }
+
+    if (this.mouseOverEntity && this.selectedIndex >= 0) {
+      this.pointWasDragged = true;
+
+      const point = screenToWorldPosition(this.mapObject.viewer,event.endPosition).position;
+
+
+      if (!point) {
+        return;
+      }
+
+      let carto = Cartographic.fromCartesian(point);
+
+      const height = this.mapObject.viewer.scene.sampleHeight(carto);
+
+      this.verticsPostions[this.selectedIndex] = Cartesian3.fromRadians(
+        carto.longitude,
+        carto.latitude,
+        height
+      );
+
+      // console.log(Cartographic.fromCartesian(point).height);
+
+      if (this.selectedIndex === 0) {
+        this.verticsPostions[this.verticsPostions.length - 1] =
+          this.verticsPostions[0];
+      }
+
+      if (this.selectedIndex === this.verticsPostions.length - 1) {
+        this.verticsPostions[0] =
+          this.verticsPostions[this.verticsPostions.length - 1];
+      }
+
+      this.mapObject.viewer.scene.requestRender();
+
+      this.updateVerticesPoints(true);
+      this.mapObject.viewer.scene.requestRender();
+      return;
+    }
+
+    if (this.mapObject.viewer.scene.pickPositionSupported) {
+      let result: any;
+
+      const pickedObject = this.mapObject.viewer.scene.drillPick(
+        event.endPosition
+      );
+
+      const entity: any = pickedObject.filter(
+        (object) => object.id && object.id.billboard !== undefined
+      )[0];
+
+      if (entity && entity.id && entity.id instanceof Entity) {
+        result = {
+          id:
+            ((entity as any).id.data && (entity as any).data.id) ||
+            entity.id.id,
+          point: event.position,
+          target: this.mapObject.viewer,
+          type: "mousemove",
+          features: [entity.id],
+        };
+
+        this.mouseEnter(entity, result);
+        // }
+      } else {
+        if (this.mouseOverEntity && !this.pointWasDragged) {
+          this.mouseLeave();
+        }
+      }
+    }
+  }
+
+  /**
+   * On mouse enter
+   */
+  mouseEnter(entity: any, result?: any) {
+    if (!result.features[0]) {
+      return;
+    }
+
+    this.mapObject.viewer.canvas.style.cursor = "pointer";
+    this.mouseOverEntity = entity.id;
+
+    this.handler.setInputAction(
+      this.mouseDown.bind(this),
+      ScreenSpaceEventType.LEFT_DOWN
+    );
+    this.handler.setInputAction(
+      this.mouseUp.bind(this),
+      ScreenSpaceEventType.LEFT_UP
+    );
+    this.handler.setInputAction(
+      this.mouseDown.bind(this),
+      ScreenSpaceEventType.PINCH_START
+    );
+    this.handler.setInputAction(
+      this.mouseUp.bind(this),
+      ScreenSpaceEventType.PINCH_END
+    );
+  }
+
+  /**
+   * On mouse leave
+   */
+  private mouseLeave = () => {
+    this.mapObject.viewer.scene.requestRender();
+    this.updateVerticesPoints();
+    this.selectedIndex = -1;
+    this.pointWasDragged = false;
+    this.mouseOverEntity = false;
+    this.mapObject.viewer.canvas.style.cursor = "default";
+    this.mapObject.viewer.scene.requestRender();
+  };
+
+  /**
+   * On mouse down
+   */
+  private mouseDown = () => {
+    if (this.mouseOverEntity) {
+      const self = this;
+
+      if (this.mouseOverEntity.type === "main") {
+        const entityPosition: Cartesian3 =
+          // eslint-disable-next-line no-underscore-dangle
+          this.mouseOverEntity.position._value;
+
+        this.selectedIndex = self.verticsPostions.findIndex(
+          (position: Cartesian3) => {
+            if (
+              position.x === entityPosition.x &&
+              position.y === entityPosition.y &&
+              position.z === entityPosition.z
+            ) {
+              return true;
+            }
+            return false;
+          }
+        );
+      }
+
+      this.mapObject.disablePan();
+    }
+
+    this.updateVerticesPoints();
+  };
+
+  /**
+   * On mouse up
+   */
+  private mouseUp() {
+    if (this.selectedIndex === 0) {
+      this.verticsPostions[this.verticsPostions.length - 1] =
+        this.verticsPostions[0];
+    }
+
+    if (this.selectedIndex === this.verticsPostions.length - 1) {
+      this.verticsPostions[0] =
+        this.verticsPostions[this.verticsPostions.length - 1];
+    }
+
+    if (this.options.onPinchEnd && this.selectedIndex >= 0) {
+      this.options.onPinchEnd(this.getData());
+    }
+
+    this.mapObject.viewer.scene.requestRender();
+
+    this.updateVerticesPoints();
+
+    this.pointWasDragged = false;
+    this.mouseOverEntity = null;
+    this.selectedIndex = -1;
+    this.mapObject.enablePan();
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** Removes all listeners added by this layer */
+  public removeListeners() {
+    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOWN);
+    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_UP);
+    this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE);
+    this.handler.removeInputAction(ScreenSpaceEventType.PINCH_END);
+    this.handler.removeInputAction(ScreenSpaceEventType.PINCH_START);
+    this.handler.removeInputAction(ScreenSpaceEventType.PINCH_MOVE);
+  }
+
+  /**
+   * Returns the layer's data se
+   */
+  public getData(): PolygonData {
+    const data: any = {
+      points: cartesianArrayToPointArray(this.verticsPostions),
+      properties: this.data.properties,
+    };
+
+    return data;
+  }
+
+  /** @inheritdoc */
+  remove() {
+    this.mapObject.viewer.dataSources.remove(this.pointLayer, true);
+    this.mapObject.viewer.dataSources.remove(this.lineLayer, true);
+    this.removeListeners();
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** @inheritdoc */
+  show() {
+    this.pointLayer.show = true;
+    this.lineLayer.show = true;
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** @inheritdoc */
+  hide() {
+    this.pointLayer.show = false;
+    this.lineLayer.show = false;
+    this.mapObject.viewer.scene.requestRender();
+  }
+}

package/src/layers/line.ts

@@ -0,0 +1,210 @@
+import {
+  Cartesian3,
+  CustomDataSource,
+  HeadingPitchRange,
+  Math as cMath,
+} from "cesium";
+
+import type { LineData, LineOptions } from "../app.interface";
+
+import type CesiumView from "../droneView";
+
+import { addPolyLineFilled, addLabel, distance3D, getMidPoint} from "../utility";
+
+
+/**
+ * Use this class to create a marker layer
+ * @param {MapBox} mapObject - The mapbox map object
+ * @param {string} uniqueName - The unique name of the layer
+ * @param {LineData[]} data - The data to be used in the layer
+ * @param {LineOptions} options - The options for the layer (see {@link LineOptions})
+ */
+export default class LineLayer {
+  lineLayerId: string;
+
+  opacity: number;
+
+  layer: CustomDataSource;
+
+  /**
+   * @param { CesiumView } mapObject  map object
+   * @param { string }uniqueName string unique name for the layer
+   * @param { LineData[] } data
+   * @param { LineOptions } options
+   */
+  constructor(
+    public mapObject: CesiumView,
+    public uniqueName: string,
+    public data: LineData[],
+    public options: LineOptions
+  ) {
+    this.lineLayerId = `Line-layer-${this.uniqueName}`;
+    this.opacity = 1;
+    this.buildLayer();
+    this.add(this.data).then(() => {
+      if (this.options.setBounds === undefined || this.options.setBounds) {
+        this.setBounds();
+      }
+      this.addListeners();
+    });
+  }
+
+  /** To initialize layer */
+  public buildLayer(): void {
+    if (this.mapObject.viewer.dataSources.getByName("line" + this.uniqueName)) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "line" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+    this.layer = new CustomDataSource("line" + this.uniqueName);
+
+    this.mapObject.viewer.dataSources.add(this.layer);
+  }
+
+  /** To add layer on map */
+  public add(data: LineData[]) {
+    const self = this;
+    return new Promise<void>((resolve) => {
+      const loadCommands: any = [];
+      data.forEach((lineData: LineData) => {
+        loadCommands.push(self.addToMap(lineData));
+      });
+
+      Promise.all(loadCommands).then(() => {
+        this.mapObject.viewer.scene.requestRender();
+        resolve();
+      });
+    });
+  }
+
+  /**
+   * Add data on map
+   * @param { LineData } data
+   */
+  public addToMap(data: LineData) {
+    let zOffset = 0; // To add this layer little above to prevous layer
+    if (this.mapObject.layers.line) {
+      zOffset = this.mapObject.layers.line.length * 0.1;
+    }
+
+    return new Promise<void>((resolve) => {
+
+      const line = addPolyLineFilled(
+        this.mapObject.viewer,
+        Cartesian3.fromDegreesArrayHeights(data.points.flat()),
+        {
+          type: "LineString",
+          lineColor: data.properties.color,
+          lineWidth: +data.properties.lineWidth || 3,
+          opacity: +this.opacity,
+          measurement: false
+        },
+        this.lineLayerId,
+        data.properties
+      );
+      this.layer.entities.add(line);
+
+      console.log("data points", data.points)
+      for (var i = 0; i < data.points.length - 1; i++) {
+        const convertedCoords = Cartesian3.fromDegreesArrayHeights(data.points.flat())
+        var firstCoordinate = convertedCoords[i]
+        var secondCoordinate = convertedCoords[i+1]
+
+        const distance = distance3D([
+          firstCoordinate,
+          secondCoordinate,
+        ]);
+
+        addLabel(this.mapObject.viewer, {
+          position: getMidPoint(firstCoordinate,secondCoordinate),
+          text: `${distance.toFixed(2).toString()} m`,
+          id: data.properties.label
+        });
+      }
+
+      resolve();
+    });
+  }
+
+  /**
+   * With the correct LayerOptions configuration
+   * the map will fit its bounds around the given feature set
+   * @param features Array<MarkerData>
+   */
+  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
+      ),
+    });
+  }
+
+  public addListeners() {
+    this.mapObject.addLayerListener('click', this.lineLayerId, (event: any) => {
+      if(this.options.onClick){
+        this.options.onClick(event);
+      }      
+    });
+
+    this.mapObject.addLayerListener(
+        'mousemove',
+        this.lineLayerId,
+        (event: any) => {
+            this.mapObject.viewer.canvas.style.cursor = 'pointer';
+        }
+    );
+
+    this.mapObject.addLayerListener(
+        'mouseenter',
+        this.lineLayerId,
+        (event: any) => {         
+          this.mapObject.viewer.canvas.style.cursor = 'pointer';
+        }
+    );
+
+    this.mapObject.addLayerListener('mouseout', this.lineLayerId, () => {       
+        this.mapObject.viewer.canvas.style.cursor = '';
+    });
+}
+
+/** Removes all listeners added by this layer */
+public removeListeners() {
+    this.mapObject.removeLayerListeners(this.lineLayerId);
+}
+
+  /** 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();
+  }
+
+  /**
+   * 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);
+  }
+
+  /** enables visibility of the layer */
+  public show(): void {
+    this.layer.show = true;
+    this.mapObject.viewer.entities.show = true;
+  }
+
+  /** Disables visibility of the layer */
+  public hide(): void {
+    this.layer.show = false;
+    this.mapObject.viewer.entities.show = false
+  }
+}