drone_view 3.0.18 → 3.0.20

package/src/layers/editPoint.ts

@@ -0,0 +1,345 @@
+import {
+  CallbackProperty,
+  Color,
+  Cartesian3,
+  CustomDataSource,
+  Entity,
+  Math as cMath,
+  HeadingPitchRange,
+  PolygonHierarchy,
+  PolylineDashMaterialProperty,
+  sampleTerrainMostDetailed,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  HeightReference,
+  VerticalOrigin,
+  Cartographic,
+  Cartesian2
+} from "cesium";
+
+import {
+  EditPointOption,
+  LineData,
+  LineOptions,
+  MarkerData,
+  MarkerOptions,
+  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 {MarkerData} data - The data to be used in the layer
+ * @param { EditPointOption } options - The options for the layer)
+ */
+export default class EditPoint {
+  editLayerId: string;
+  pointLayer: CustomDataSource;
+  selectedPointID: string | number | null;
+  pointWasDragged: boolean;
+  mapWasMoved: boolean;
+  mouseOverEntity: any | null;
+  opacity: number = 0.0;
+  handler: ScreenSpaceEventHandler;
+  isMouseDown: boolean = false;
+
+  /**
+   * @param { CesiumView } mapObject  map object
+   * @param { string }uniqueName string unique name for the layer
+   * @param { MarkerData } data
+   * @param { EditPointOption } options
+   */
+  constructor(
+    public mapObject: CesiumView,
+    public uniqueName: string,
+    public data: MarkerData,
+    public options: EditPointOption
+  ) {
+    this.editLayerId = `point-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.zoomToDrawing();
+    this.addListeners();
+  }
+
+  /** To initialize layer */
+  public buildLayer(): void {
+    if (
+      this.mapObject.viewer.dataSources.getByName(
+        "point-edit-Point-" + this.uniqueName
+      )
+    ) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "point-edit-Point-" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+
+    this.pointLayer = new CustomDataSource(
+      `point-edit-Point-${this.editLayerId}`
+    );
+
+    this.mapObject.viewer.dataSources.add(this.pointLayer);
+  }
+
+  /** To add layer on map */
+  public add(data: MarkerData) {
+    const self = this;
+    return new Promise<void>((resolve) => {
+      const cartesianPositions = pointArrayToCartesianArray([data.point]);
+      const cartographicPositions =
+        this.mapObject.viewer.scene.globe.ellipsoid.cartesianArrayToCartographicArray(
+          cartesianPositions
+        );
+      this.mapObject.viewer.scene
+        let positions =
+          this.mapObject.viewer.scene.globe.ellipsoid.cartographicArrayToCartesianArray(
+            cartographicPositions
+          );
+        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>`;
+        const pointMain = {
+          position: positions[0],
+          billboard: {
+            image: `data:image/svg+xml;base64,${window.btoa(svg)}`,
+            verticalOrigin: VerticalOrigin.CENTER,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+          layerId: this.editLayerId,
+        };
+        this.mapObject.viewer.scene.requestRender();
+
+        this.pointLayer.entities.add(pointMain);
+        resolve();
+    });
+  }
+
+  /** to set map bouds fit with layer data */
+  public setBounds(): void {
+    const time = this.options.setBoundsInstant ? 0 : undefined;
+    this.mapObject.viewer.flyTo(this.pointLayer.entities, {
+      duration: time,
+      offset: new HeadingPitchRange(
+        cMath.toRadians(this.mapObject.viewer.camera.heading),
+        -Math.PI / 2,
+        0
+      ),
+    });
+  }
+
+  public zoomToDrawing(): void {
+    if (this.options.zoom){
+      const point = this.data.point
+      this.mapObject.viewer.camera.flyTo({
+        destination: Cartesian3.fromDegrees(point[0], point[1], 30)
+      });
+    }
+  }
+
+  /** 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.mouseOverEntity.layerId === this.editLayerId &&
+      this.isMouseDown
+    ) {
+      this.pointWasDragged = true;
+
+      const mousePosition = new Cartesian2(event.endPosition.x, event.endPosition.y);
+      const point = this.mapObject.viewer.scene.pickPosition(mousePosition);
+
+      if (!point) {
+        return;
+      }
+
+      this.mouseOverEntity.position = point;
+      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 &&
+        entity.id.layerId === this.editLayerId
+      ) {
+        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 = null;
+    this.mapObject.viewer.canvas.style.cursor = "default";
+    this.mapObject.viewer.scene.requestRender();
+  };
+
+  /** On mouse down */
+  private mouseDown = () => {
+    if (this.mouseOverEntity) {
+      this.isMouseDown = true;
+      this.mapObject.disablePan();
+    }
+  };
+
+  /** On mouse up */
+  private mouseUp() {
+    if (this.pointWasDragged) {
+      console.log(this.mouseOverEntity);
+      
+      // let carto = Cartographic.fromCartesian(this.mouseOverEntity._position._value);
+      // this.mapObject.viewer.scene
+      //   .sampleHeightMostDetailed([carto])
+      //   .then((pos) => {
+      //     const position = Cartesian3.fromRadians(pos[0].longitude,pos[0].latitude,pos[0].height)
+      //     this.mouseOverEntity.position = position;
+      if(this.options.onDragEnd){
+        const dragEventData = {
+          points: cartesianToPoint(this.mouseOverEntity._position._value),
+          id: this.data?.properties?.id
+        };
+        this.options.onDragEnd(dragEventData);
+      }
+        this.pointWasDragged = false;
+        this.mouseOverEntity = null;
+        this.isMouseDown = false;
+        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 */
+  public getData() {
+    // const data: any = {
+    //   points: cartesianArrayToPointArray(this.verticsPostions),
+    //   properties: this.data.properties,
+    // };
+    // return data;
+  }
+
+  /** @inheritdoc */
+  remove() {
+    this.mapObject.viewer.dataSources.remove(this.pointLayer, true);
+    this.removeListeners();
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** @inheritdoc */
+  show() {
+    this.pointLayer.show = true;
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** @inheritdoc */
+  hide() {
+    this.pointLayer.show = false;
+    this.mapObject.viewer.scene.requestRender();
+  }
+}