drone_view 3.0.20 → 3.0.21

package/src/event.ts

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

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