drone_view 3.0.20 → 3.0.21

package/src/layers/editPolygon.ts

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

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