drone_view 3.0.18 → 3.0.20

package/src/layers/droneImages.ts

@@ -0,0 +1,199 @@
+import axios from "axios";
+import CesiumView from "../droneView";
+import { Options } from "../app.interface";
+import {
+  Cartesian2,
+  Cartesian3,
+  Color,
+  CustomDataSource,
+  Entity,
+  HeadingPitchRoll,
+  Transforms,
+  Math as cMath,
+} from "cesium";
+import { getPyramid } from "../utility";
+
+interface droneImageData {
+  jsonUrl: string;
+}
+
+interface tileData {
+  alt: number | string;
+  angle: number | string;
+  lat: number | string;
+  lng: number | string;
+  url: string;
+  z_angle: number | string;
+  flightpitchdegree: number;
+  flightrolldegree: number;
+  flightyawdegree: number;
+  directionVector?: [number, number, number]
+}
+
+export default class DroneImage {
+  // for now default tile size of Image
+  // TODO will do the footprint analysis later to0 calculate image tile size dynamically
+  tileSize: number = 10;
+
+  droneImageLayerId: string;
+
+  layer: CustomDataSource;
+
+  activeDroneCameraId: string | null = null;
+
+  currentViewEntity: Entity | null = null;
+
+  constructor(
+    public mapObject: CesiumView,
+    public uniqueName: string,
+    public droneImageData: droneImageData,
+    public options: Options
+  ) {
+    this.droneImageLayerId = `DroneImage-layer-${this.uniqueName}`;
+
+    axios.get(droneImageData.jsonUrl).then((result) => {
+      this.buildLayer();
+      this.addCameraSymbolsOnMap(result.data);
+      this.mapObject.viewer.zoomTo(this.layer.entities);
+      this.addListeners();
+    });
+  }
+
+  /** To initialize layer */
+  public buildLayer(): void {
+    if (
+      this.mapObject.viewer.dataSources.getByName(
+        "DroneImage" + this.uniqueName
+      )
+    ) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "DroneImage" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+    this.layer = new CustomDataSource("DroneImage" + this.uniqueName);
+
+    this.mapObject.viewer.dataSources.add(this.layer);
+  }
+
+  addCameraSymbolsOnMap(tiles: tileData[]) {
+    tiles.forEach((tile) => {
+      if (typeof tile.lng === "string") {
+        tile.lng = parseFloat(tile.lng);
+      }
+
+      if (typeof tile.lat === "string") {
+        tile.lat = parseFloat(tile.lat);
+      }
+
+      if (typeof tile.alt === "string") {
+        tile.alt = parseFloat(tile.alt);
+      }
+
+      if (typeof tile.angle === "string") {
+        tile.angle = parseFloat(tile.angle);
+      }
+
+      if (typeof tile.z_angle === "string") {
+        tile.z_angle = parseFloat(tile.z_angle);
+      }
+
+      const entity = getPyramid(
+        Cartesian3.fromDegrees(tile.lng, tile.lat, tile.alt),
+        this.droneImageLayerId,
+        tile.url,
+        tile.angle,
+        tile.z_angle,
+        tile.flightpitchdegree,
+        tile.flightrolldegree,
+        tile.flightyawdegree,
+        tile.directionVector
+      );
+
+      this.layer.entities.add(entity);
+
+      this.mapObject.viewer.scene.requestRender();
+    });
+  }
+
+  public addListeners() {
+    this.mapObject.addLayerListener(
+      "click",
+      this.droneImageLayerId,
+      (event: any) => {
+        if (event.features && event.features[0]) {
+          const feature = event.features[0];
+          this.mapObject.viewer.camera.setView({
+            destination: Cartesian3.fromDegrees(
+              feature.long,
+              feature.lat,
+              feature.height
+            ),
+          });
+
+          if (this.options.onClick) {
+            this.options.onClick(feature.properties);
+          }
+        }
+      }
+    );
+
+    this.mapObject.addLayerListener(
+      "mouseenter",
+      this.droneImageLayerId,
+      (event: any) => {
+        this.mapObject.viewer.canvas.style.cursor = "pointer";
+        if (this.activeDroneCameraId !== event.id) {
+          this.activeDroneCameraId = event.id;
+          if (
+            this.activeDroneCameraId &&
+            this.layer.entities.getById(this.activeDroneCameraId)
+          ) {
+            const entity: any = this.layer.entities.getById(
+              this.activeDroneCameraId
+            ) as any;
+            entity.cylinder.outlineColor = Color.BLUE as any;
+          }
+        }
+      }
+    );
+
+    this.mapObject.addLayerListener("mouseout", this.droneImageLayerId, () => {
+      this.mapObject.viewer.canvas.style.cursor = "";
+      if (
+        this.activeDroneCameraId &&
+        this.layer.entities.getById(this.activeDroneCameraId)
+      ) {
+        const entity: any = this.layer.entities.getById(
+          this.activeDroneCameraId
+        ) as any;
+        entity.cylinder.outlineColor = Color.WHITE as any;
+        this.activeDroneCameraId = null;
+      }
+    });
+  }
+
+  /** Removes all listeners added by this layer */
+  public removeListeners() {
+    this.mapObject.removeLayerListeners(this.droneImageLayerId);
+  }
+
+  /** 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.scene.requestRender();
+  }
+
+  hide() {
+    this.layer.entities.show = false;
+    this.mapObject.viewer.scene.requestRender();
+  }
+}

package/src/layers/editLine.ts

@@ -0,0 +1,521 @@
+import {
+    CallbackProperty,
+    Color,
+    Cartesian3,
+    CustomDataSource,
+    Entity,
+    Math as cMath,
+    HeadingPitchRange,
+    PolygonHierarchy,
+    PolylineDashMaterialProperty,
+    sampleTerrainMostDetailed,
+    ScreenSpaceEventHandler,
+    ScreenSpaceEventType,
+    HeightReference,
+    VerticalOrigin,
+    Cartographic,
+  } from "cesium";
+  
+  import { LineData, LineOptions, 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 {LineData[]} data - The data to be used in the layer
+   * @param {LineOptions} options - The options for the layer)
+   */
+  export default class EditLine {
+    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 { LineData } data
+     * @param { LineOptions } options
+     */
+    constructor(
+      public mapObject: CesiumView,
+      public uniqueName: string,
+      public data: LineData,
+      public options: LineOptions
+    ) {
+      this.editLayerId = `polyLine-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(
+          "polyLine-edit-Point-" + this.uniqueName
+        )
+      ) {
+        this.mapObject.viewer.dataSources.remove(
+          this.mapObject.viewer.dataSources.getByName(
+            "polyLine-edit-Point-" + this.uniqueName
+          )[0],
+          true
+        );
+      }
+  
+      this.pointLayer = new CustomDataSource(
+        `polyLine-edit-Point-${this.editLayerId}`
+      );
+  
+      this.mapObject.viewer.dataSources.add(this.pointLayer);
+  
+      if (
+        this.mapObject.viewer.dataSources.getByName(
+          "polyLine-edit-Line-" + this.uniqueName
+        )
+      ) {
+        this.mapObject.viewer.dataSources.remove(
+          this.mapObject.viewer.dataSources.getByName(
+            "polyLine-edit-Line-" + this.uniqueName
+          )[0],
+          true
+        );
+      }
+  
+      this.lineLayer = new CustomDataSource(
+        `polyLine-edit-Line-${this.editLayerId}`
+      );
+  
+      this.mapObject.viewer.dataSources.add(this.lineLayer);
+    }
+  
+    /** To add layer on map */
+    public add(data: LineData) {
+      //   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];
+            // }
+  
+            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 = this.mapObject.viewer.scene.pickPosition(event.endPosition);
+  
+        // const point = screenToWorldPosition(this.mapObject.viewer,event.endPosition).position;
+  
+        const ray = this.mapObject.viewer.scene.camera.getPickRay(
+          event.endPosition
+        )!;
+        const point = this.mapObject.viewer.scene.globe.pick(
+          ray,
+          this.mapObject.viewer.scene
+        )!;
+  
+        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();
+    }
+  }
+