drone_view 3.0.19 → 3.0.20

package/src/event.ts

@@ -0,0 +1,359 @@
+import { Cesium3DTileset, Entity, ScreenSpaceEventHandler, ScreenSpaceEventType } from 'cesium';
+import CenterOfMasss from '@turf/center-of-mass';
+import type { Point, SingleLocationFeature } from './app.interface';
+import { cartesianToGeojson, cartesianToPoint } from './utility';
+import type CesiumView from './droneView';
+
+export default class EventManager {
+    mapObject: CesiumView;
+
+    handler: ScreenSpaceEventHandler;
+
+    layerEvents: any = [];
+
+    mouseGlobalPostion: Point;
+
+    mouseOverEntity: Entity | null;
+
+    isMouseOver: boolean = false;
+
+    constructor(mapObject: CesiumView) {
+        this.mapObject = mapObject;
+        this.handler = new ScreenSpaceEventHandler(
+            this.mapObject.viewer.scene.canvas
+        );
+        this.handler.setInputAction(
+            this.click.bind(this),
+            ScreenSpaceEventType.LEFT_CLICK
+        );
+        this.handler.setInputAction(
+            this.mouseMove.bind(this),
+            ScreenSpaceEventType.MOUSE_MOVE
+        );
+    }
+
+    addListener(event: string, layerId: string, callback: Function) {
+        if (this.layerEvents[event] === undefined) {
+            this.layerEvents[event] = [];
+        }
+
+        this.layerEvents[event][layerId] = callback;
+    }
+
+    /** Handle click event for all the layer */
+    click(event: any) {
+        if (this.layerEvents.click === undefined) {
+            return;
+        }
+
+        if (this.layerEvents.click !== undefined) {
+            if (this.mapObject.viewer.scene.pickPositionSupported) {
+                let result: any;
+
+                const position = this.mapObject.viewer.camera.pickEllipsoid(
+                    event.position
+                );
+                let point: any;
+                if (position) {
+                    point = cartesianToPoint(position);
+                } else {
+                    const ray = this.mapObject.viewer.scene.camera.getPickRay(
+                        event.position
+                    )!;
+                    const position2D = this.mapObject.viewer.scene.globe.pick(
+                        ray,
+                        this.mapObject.viewer.scene
+                    )!;
+                    point = cartesianToPoint(position2D);
+                }
+
+                const pickedObject = this.mapObject.viewer.scene.drillPick(
+                    event.position
+                );
+                if (pickedObject.length > 0) {
+                    const entity = pickedObject[0].id;
+
+                    if (entity && entity instanceof Entity) {
+                        this.mouseGlobalPostion = point;
+                        result = {
+                            id: pickedObject[0].id || entity.id,
+                            lngLat: {
+                                lat: point.lat,
+                                lng: point.long,
+                                height: point.height,
+                            },
+                            point: event.position,
+                            target: this.mapObject.viewer,
+                            type: 'click',
+                            features: [
+                                this.entityToSingleLocationFeature(entity),
+                            ],
+                        };
+                    }
+
+                    Object.keys(this.layerEvents.click).forEach(
+                        (layerId: string) => {                           
+                            if (entity && layerId === (entity as any).layerId) {
+                                this.layerEvents.click[layerId](result);
+                            }
+                        }
+                    );
+                } else {
+                    result = {
+                        lngLat: {
+                            lat: point.lat,
+                            lng: point.long,
+                            height: point.height,
+                        },
+                        point: event.position,
+                        target: this.mapObject.viewer,
+                        type: 'click',
+                        features: [],
+                    };
+
+                    Object.keys(this.layerEvents.click).forEach(
+                        (layerId: string) => {
+                            this.layerEvents.click[layerId](result);
+                        }
+                    );
+                }
+            }
+        }
+    }
+
+    mouseMove(event: any) {
+        if (!event.endPosition) {
+            return;
+        }
+
+        if (
+            !(
+                this.layerEvents.mousemove !== undefined ||
+                this.layerEvents.mouseenter !== undefined ||
+                this.layerEvents.mouseout !== undefined
+            )
+        ) {
+            return;
+        }
+
+        if (this.mapObject.viewer.scene.pickPositionSupported) {
+            let result: any;
+
+            const position = this.mapObject.viewer.camera.pickEllipsoid(
+                event.endPosition
+            );
+            let point: any;
+            if (position) {
+                point = cartesianToPoint(position);
+            } else {
+                const ray = this.mapObject.viewer.scene.camera.getPickRay(
+                    event.endPosition
+                )!;
+                const position2D = this.mapObject.viewer.scene.globe.pick(
+                    ray,
+                    this.mapObject.viewer.scene
+                );
+
+                if (!position2D) {
+                    return;
+                }
+
+                point = cartesianToPoint(position2D);
+            }
+
+            let pickedObject = this.mapObject.viewer.scene.drillPick(
+                event.endPosition
+            );
+
+            // console.log(pickedObject);
+
+            pickedObject = pickedObject.filter(object=> !(object?.primitive instanceof Cesium3DTileset));
+            
+
+            if (pickedObject.length > 0) {
+                const entity: any = pickedObject[0].id;
+
+                if (entity && entity instanceof Entity) {
+                    this.mouseGlobalPostion = point;
+                    result = {
+                        id:
+                            ((entity as any).data && (entity as any).data.id) ||
+                            entity.id,
+                        lngLat: {
+                            lat: point.lat,
+                            lng: point.long,
+                            height: point.height,
+                        },
+                        point: event.position,
+                        target: this.mapObject.viewer,
+                        type: 'mousemove',
+                        features: [this.entityToSingleLocationFeature(entity)],
+                    };
+
+                    this.mouseOver(entity, result);
+
+                    if (
+                        this.layerEvents.mousemove !== undefined &&
+                        this.isMouseOver &&
+                        this.mouseOverEntity
+                    ) {
+                        Object.keys(this.layerEvents.mousemove).forEach(
+                            (layerId: string) => {
+                                if (layerId === (entity as any).layerId) {
+                                    if (
+                                        layerId ===
+                                        (this.mouseOverEntity as any).layerId
+                                    ) {
+                                        this.layerEvents.mousemove[layerId](
+                                            result
+                                        );
+                                    } else {
+                                        this.mouseOut();
+                                        this.mouseOver(entity, result);
+                                    }
+                                }
+                            }
+                        );
+                    }
+                }
+            } else {
+                this.mouseOut();
+            }
+        }
+    }
+
+    mouseOver(entity: any, event: any) {
+        if (
+            this.layerEvents.mouseenter !== undefined &&
+            !this.isMouseOver &&
+            !this.mouseOverEntity
+        ) {
+            Object.keys(this.layerEvents.mouseenter).forEach(
+                (layerId: string) => {
+                    if (layerId === (entity as any).layerId) {
+                        this.mouseOverEntity = entity;
+                        this.isMouseOver = true;
+                        this.layerEvents.mouseenter[layerId](event);
+                    }
+                }
+            );
+        }
+    }
+
+    mouseOut() {
+        const self = this;
+        if (
+            self.layerEvents.mouseout !== undefined &&
+            self.isMouseOver &&
+            self.mouseOverEntity
+        ) {
+            Object.keys(self.layerEvents.mouseout).forEach(
+                (layerId: string) => {
+                    if (
+                        self.mouseOverEntity &&
+                        self.isMouseOver &&
+                        layerId === (self.mouseOverEntity as any).layerId
+                    ) {
+                        self.mouseOverEntity = null;
+                        self.isMouseOver = false;
+                        self.layerEvents.mouseout[layerId]();
+                    }
+                }
+            );
+        }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    private entityToSingleLocationFeature(
+        entity: Entity
+    ): SingleLocationFeature | undefined {
+        if (entity.billboard || entity.ellipse) {
+            const position: any = entity.position!.valueOf();
+            // eslint-disable-next-line no-underscore-dangle
+            const point = cartesianToPoint(position._value);
+            return {
+                geometry: 'Point',
+                lat: point.lat,
+                long: point.long,
+                height: point.height || 0,
+                properties: (entity as any).data,
+            };
+        }
+        if (entity.plane) {
+            const position: any = entity.position!.valueOf();
+            // eslint-disable-next-line no-underscore-dangle
+            const point = cartesianToPoint(position._value);
+            return {
+                geometry: 'Point',
+                lat: point.lat,
+                long: point.long,
+                height: point.height || 0,
+                properties: (entity as any).data,
+            };
+        }
+        if (entity.polyline) {
+            return {
+                geometry: 'Point',
+                lat: this.mouseGlobalPostion.lat,
+                long: this.mouseGlobalPostion.long,
+                height: this.mouseGlobalPostion.height || 0,
+                properties: (entity as any).data,
+            };
+        }
+        if (entity.polygon) {
+            const { positions } = (entity.polygon.hierarchy as any).valueOf();
+
+            if(!positions){
+                return undefined;
+            }
+
+            const center = CenterOfMasss(
+                cartesianToGeojson(positions, 'Polygon')
+            );
+
+            return {
+                geometry: 'Point',
+                lat: center.geometry.coordinates[1],
+                long: center.geometry.coordinates[0],
+                height: 0,
+                properties: (entity as any).data,
+            };
+        }
+
+        if (entity.cylinder) {
+            const position: any = entity.position!.valueOf();
+            if(!position){
+                return undefined;
+            }
+            // eslint-disable-next-line no-underscore-dangle
+            const point = cartesianToPoint(position._value);
+
+            return {
+                geometry: 'Point',
+                lat: point.lat,
+                long: point.long,
+                height: point.height || 0,
+                properties: (entity as any).data,
+            };
+        }
+
+        return undefined;
+    }
+
+    removeLayerListner(event: string, layerId: string) {
+        if (this.layerEvents[event] && this.layerEvents[event][layerId]) {
+            delete this.layerEvents[event][layerId];
+        }
+    }
+
+    removeLayerListners(layerId: string) {
+        Object.values(this.layerEvents).forEach((eventType: any) => {
+            Object.keys(eventType).forEach((layerid: string) => {
+                if (layerid === layerId) {
+                    // eslint-disable-next-line no-param-reassign
+                    delete eventType[layerid];
+                }
+            });
+        });
+    }
+}

package/src/layers/annotation.ts

@@ -0,0 +1,175 @@
+import {
+  CustomDataSource,
+  HeadingPitchRange,
+  Math as cMath,
+  Cartesian3,
+  Cartesian2,
+} from "cesium";
+
+import type CesiumView from "../droneView";
+
+import { addPolyLineFilled, getPolygonEntity } from "../utility";
+
+import {
+  AnnotationData,
+  Options,
+  PolygonData,
+  PolygonOptions,
+} from "../app.interface";
+
+/**
+ * Use this class to create a marker layer
+ * @extends {GenericLayer}
+ * @param {MapBox} mapObject - The mapbox map 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 (see {@link PolygonOptions})
+ */
+export default class Annotation {
+  annotationLayerId: string;
+
+  uniqueName: string;
+
+  mapObject: CesiumView;
+
+  options: PolygonOptions;
+
+  layer: CustomDataSource;
+
+  data: AnnotationData[];
+
+  /**
+   * @param { CesiumView } mapObject  map object
+   * @param { string }uniqueName string unique name for the layer
+   * @param { AnnotationData[] } data
+   * @param { Options } options
+   */
+  constructor(
+    mapObject: CesiumView,
+    uniqueName: string,
+    data: AnnotationData[],
+    options: Options
+  ) {
+    this.annotationLayerId = `annotation-${this.uniqueName}`;
+    this.data = data;
+    this.mapObject = mapObject;
+    this.uniqueName = uniqueName;
+    this.options = options;
+
+    this.buildLayer();
+    this.add(this.data).then(() => {
+      if (this.options.setBounds === undefined || this.options.setBounds) {
+        this.setBounds();
+      }
+    });
+  }
+
+  /** To initialize layer */
+  public buildLayer(): void {
+    if (
+      this.mapObject.viewer.dataSources.getByName(
+        "annotation-" + this.uniqueName
+      )
+    ) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "annotation-" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+    this.layer = new CustomDataSource("annotation-" + this.uniqueName);
+
+    this.mapObject.viewer.dataSources.add(this.layer);
+  }
+
+  /** To add layer on map */
+  public add(data: AnnotationData[]) {
+    const self = this;
+
+    return new Promise<void>((resolve) => {
+      self.addToMap(data).then(() => {
+        this.mapObject.viewer.dataSources.add(this.layer);
+
+        this.mapObject.viewer.scene.requestRender();
+        resolve();
+      });
+    });
+  }
+
+  /**
+   * Add data on map
+   * @param { AnnotationData } data
+   */
+  public addToMap(data: AnnotationData[]) {
+    return new Promise<void>((resolve) => {
+      const cartesians: any = [];
+
+      data.forEach((point: any) => {
+        cartesians.push(Cartesian3.fromDegrees(point.point[0], point.point[1]));
+      });
+
+      this.mapObject.viewer.scene
+        .clampToHeightMostDetailed(cartesians)
+        .then((pos) => {
+          pos.forEach((position: Cartesian3, i: number) => {
+
+            const svg = `
+              <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
+                  <!-- Rectangle -->
+                  <rect x="50" y="30" width="100" height="60" fill="#000000" rx="5" opacity="0.85" stroke="${data[i].properties.color}" stroke-width="2" />
+
+                  <!-- Text -->
+                  <text x="100" y="65" text-anchor="middle"  font-size="13"  fill="#ffffff">${data[i].properties.name}</text>
+
+                  <!-- Vertical Line -->
+                  <line x1="100" y1="90" x2="100" y2="140" stroke="${data[i].properties.color}" stroke-width="2" />
+
+                  <!-- Arrowhead -->
+                  <polygon points="95,135 100,145 105,135" fill="${data[i].properties.color}" />
+              </svg>
+                `;
+
+            const point = {
+              position: position,
+              billboard: {
+                image: `data:image/svg+xml;base64,${window.btoa(svg)}`,
+                pixelOffset : new Cartesian2(0,-90),
+              },
+            };
+
+            this.layer.entities.add(point);
+          });
+        });
+    });
+  }
+
+  /** to set map bouds fit with layer data */
+  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
+      ),
+    });
+  }
+
+  /** Remove layer from map and destroy layer */
+  public remove(): void {
+    this.mapObject.viewer.dataSources.remove(this.layer, true);
+    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();
+  }
+}