drone_view 3.0.20 → 3.0.21

package/src/layers/droneImages.ts

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

@@ -1,521 +0,0 @@
-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();
-    }
-  }
-