drone_view 3.0.20 → 3.0.21

package/src/layers/model.ts

@@ -1,253 +0,0 @@
-import {
-  Cesium3DTileset,
-  Cesium3DTileStyle,
-  HeadingPitchRange,
-  ShadowMode,
-  Math as cMath,
-  Transforms,
-  Cartesian3,
-  HeadingPitchRoll,
-  Matrix4,
-  SplitDirection,
-} from "cesium";
-import { Options, ModelData, Point, MapType } from "../app.interface";
-import type CesiumView from "../droneView";
-import { cartesianToPoint } from "../utility";
-/**
- * Use this class to create a Ortho layer
- * @param { MapBox } mapObject - The mapbox map object
- * @param { string } uniqueName - The unique name of the layer
- * @param { ModelData } data - The data to be used in the layer
- * @param { Options } options - The options for the layer (see {@link Options})
- */
-export default class ModelLayer {
-  tilsetLayerLayers: Cesium3DTileset;
-
-  data: ModelData;
-
-  modelLayerId: string;
-
-  type: string;
-
-  uniqueName: string;
-
-  opacity: number;
-
-  mapObject: CesiumView;
-
-  options: Options;
-
-  tileset: Cesium3DTileset;
-
-  mapType: MapType;
-
-  constructor(
-    mapObject: CesiumView,
-    uniqueName: string,
-    data: ModelData,
-    options: Options,
-    mapType: MapType
-
-  ) {
-    this.modelLayerId = `Model-${this.uniqueName}`;
-    this.mapType = mapType;
-    this.opacity = 1;
-    this.data = data;
-    this.mapObject = mapObject;
-    this.uniqueName = uniqueName;
-    this.options = options;
-    this.addLayer(data, true);
-  }
-
-  getSplitDirection() {
-    if (this.mapType && this.mapType === 'default') {
-        return SplitDirection.LEFT;
-    }
-
-    if (this.mapType && this.mapType === 'compare') {
-        return SplitDirection.RIGHT;
-    }
-
-    return SplitDirection.NONE;
-}
-
-  /**
-   * To load 3D data and return tileset for future use (visibility, remove, zoom)
-   * @param url string Url or Path to main tileset.json file
-   * @returns Cesium3DTileset
-   */
-  public async addTilset(
-    url: string,
-    color: string = '#ffffff',
-    shadow: boolean,
-    modelMatrix: Matrix4,
-    setBound: boolean = true
-  ) {
-    const tileset = await new Cesium3DTileset({
-      url,
-      shadows: shadow ? ShadowMode.ENABLED : ShadowMode.DISABLED,
-      maximumScreenSpaceError: 2,
-      skipLevelOfDetail: true,
-      immediatelyLoadDesiredLevelOfDetail: true,
-      dynamicScreenSpaceError: true,
-      splitDirection: this.getSplitDirection(),
-      // modelMatrix: modelMatrix,
-    });
-
-    tileset.readyPromise.then((tileset => {
-
-      const center = cartesianToPoint(tileset.boundingSphere.center);   
-
-      if (+(center.height || 0) < -1000) {
-        tileset.modelMatrix = modelMatrix;
-      }else{
-        this.data.center = center;   
-      }
-      
-      // if(!tileset.asset || !tileset.asset.extras || !tileset.asset.extras.ion || !tileset.asset.extras.ion.georeferenced){
-      //   console.log("pppp");
-      // }    
-
-      if (color) {        
-        tileset.style = new Cesium3DTileStyle({
-          color: {
-            conditions: [["true", `color("${color}", ${this.opacity})`]],
-          },
-        });
-      }
-      this.mapObject.viewer.scene.primitives.add(tileset);
-      this.tileset = tileset;
-      if (setBound) this.mapObject.viewer.zoomTo(tileset);
-      // this.tilsetLayerLayers = tilsetLayer;
-      this.mapObject.viewer.scene.requestRender();
-      return tileset;
-    }))
-
-  }
-
-  setBounds() {
-    const time = this.options.setBoundsInstant ? 0 : undefined;
-    this.mapObject.viewer.flyTo(this.tilsetLayerLayers, {
-      duration: time,
-      offset: new HeadingPitchRange(
-        cMath.toRadians(this.mapObject.viewer.camera.heading),
-        -Math.PI / 2,
-        0
-      ),
-    });
-  }
-
-  /**
-   * Add a raster layer to the map
-   * @param {number} index - The index of the layer
-   * @param {ModelData} data - The data to be used in the layer
-   */
-  async addLayer(layer: ModelData, setBound: boolean) {
-    const color = layer.color || "#ffffff";
-    const isShadow = layer.shadow || true;
-    const { url } = layer;
-    const { center } = layer;
-    const { rotationX } = layer || 0;
-    const { rotationY } = layer || 0;
-    const { rotationZ } = layer || 0;
-
-    const modelMatrix = Transforms.headingPitchRollToFixedFrame(
-      Cartesian3.fromDegrees(+center?.long || 0, +center?.lat || 0, +(center?.height || 0)),
-      new HeadingPitchRoll(
-        cMath.toRadians(rotationX),
-        cMath.toRadians(rotationY),
-        cMath.toRadians(rotationZ)
-      )
-    );
-
-    const tilsetLayer: any = await this.addTilset(
-      url,
-      color,
-      isShadow,
-      modelMatrix,
-      setBound
-    );
-
-  }
-
-  /** Remove layer from map and destroy layer */
-  public remove(): void {
-    this.mapObject.viewer.scene.primitives.remove(this.tileset);
-    this.mapObject.viewer.scene.requestRender();
-  }
-
-  /** Show model */
-  public show(): void{
-    this.tileset.show = true;
-    this.mapObject.viewer.scene.requestRender();
-  }
-
-    /** Hide model */
-    public hide(): void{
-      this.tileset.show = false;
-      this.mapObject.viewer.scene.requestRender();
-    }
-
-  /** @inheritdoc */
-  setOpacity(opacity: number) {    
-    this.opacity = opacity;
-    this.remove();
-    this.addLayer(this.data, false);
-    this.mapObject.viewer.scene.requestRender();
-  }
-
-  setRotation(rotationX: number, rotationY: number, rotationZ: number) {
-
-    if (this.tileset.asset.extras.ion.georeferenced) { 
-      return;
-    }
-
-    if (rotationX) {
-      this.data.rotationX = rotationX;
-    }
-
-    if (rotationY) {
-      this.data.rotationY = rotationY;
-    }
-
-    if (rotationZ) {
-      this.data.rotationZ = rotationZ;
-    }
-
-    const { center } = this.data;
-
-    const modelMatrix = Transforms.headingPitchRollToFixedFrame(
-      Cartesian3.fromDegrees(+center.long, +center.lat, +(center.height || 0)),
-      new HeadingPitchRoll(
-        cMath.toRadians(rotationX || 0),
-        cMath.toRadians(rotationY || 0),
-        cMath.toRadians(rotationZ || 0)
-      )
-    );
-
-    this.tileset.modelMatrix = modelMatrix;
-    this.mapObject.viewer.scene.requestRender();
-  }
-
-  setPosition(position: Point) {
-    if (this.tileset?.asset?.extras?.ion?.georeferenced) {
-      return;
-    }
-    this.data.center = position;
-    const modelMatrix = Transforms.headingPitchRollToFixedFrame(
-      Cartesian3.fromDegrees(
-        +this.data.center.long,
-        +this.data.center.lat,
-        +(this.data.center.height || 0)
-      ),
-      new HeadingPitchRoll(
-        cMath.toRadians(this.data.rotationX || 0),
-        cMath.toRadians(this.data.rotationY || 0),
-        cMath.toRadians(this.data.rotationZ || 0)
-      )
-    );
-
-    this.tileset.modelMatrix = modelMatrix;
-    this.mapObject.viewer.scene.requestRender();
-  }
-}

package/src/layers/note.ts

@@ -1,333 +0,0 @@
-import {
-  Cartesian2,
-  Color,
-  CustomDataSource,
-  BillboardGraphics,
-  Math as cMath,
-  HeadingPitchRange,
-  Cartesian3,
-  HeightReference,
-  VerticalOrigin,
-} from "cesium";
-
-import type CesiumView from "../droneView";
-
-import { NoteData, NoteIcon, NoteOptions } from "../app.interface";
-import { addLabel } from "../utility";
-
-/**
- * Use this class to create a note layer
- * @param {MapBox} mapObject - The mapbox map object
- * @param {string} uniqueName - The unique name of the layer
- * @param {NoteData[]} data - The data to be used in the layer
- * @param {NoteOptions} options - The options for the layer (see {@link NoteOptions})
- */
-
-export default class NoteLayer {
-  noteLayerId: string;
-
-  icons: BillboardGraphics[] = [];
-
-  noteSize: number = 12.5;
-
-  allowSVGs: boolean = false;
-
-  opacity: number;
-
-  layer: CustomDataSource;
-
-  /**
-   * @param mapObject CesiumView map object
-   * @param uniqueName string unique name for the layer
-   * @param data Array<NoteData>
-   * @param options NoteOptions
-   */
-  constructor(
-    public mapObject: CesiumView,
-    public uniqueName: string,
-    public data: Array<NoteData>,
-    public options: NoteOptions
-  ) {
-    this.noteLayerId = `note-layer-${this.uniqueName}`;
-
-    this.opacity = 1;
-
-    this.allowSVGs = true;
-    const agent = navigator.userAgent.toLowerCase();
-    if (
-      (typeof this.options.allowSVGs !== "undefined" &&
-        !this.options.allowSVGs) ||
-      (agent.indexOf("chrome") === -1 &&
-        (agent.indexOf("edg") !== -1 ||
-          agent.indexOf("edge") !== -1 ||
-          agent.indexOf("msie") !== -1 ||
-          agent.indexOf("trident") > -1 ||
-          agent.indexOf("firefox") > -1 ||
-          agent.indexOf("safari") > -1))
-    ) {
-      this.allowSVGs = false;
-    }
-
-    // load icons before adding note on map
-    this.loadIcons().then(() => {
-      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("note" + this.uniqueName)
-    ) {
-      this.mapObject.viewer.dataSources.remove(
-        this.mapObject.viewer.dataSources.getByName(
-          "note" + this.uniqueName
-        )[0],
-        true
-      );
-    }
-    this.layer = new CustomDataSource("note" + this.uniqueName);
-  }
-
-  /** To add layer on map */
-  public add(data: NoteData[]) {
-    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();
-      });
-    });
-  }
-
-  /**
-   *
-   * @param { NoteData[] } data - load data on map
-   * @returns { void }
-   */
-  public async addToMap(data: NoteData[]): Promise<void> {
-    const cartesians: any = [];
-    const cartesiansWith3D: any = [];
-
-    data.forEach((point: any) => {
-      if (point.point[2])
-      {
-        cartesiansWith3D.push(Cartesian3.fromDegrees(point.point[0], point.point[1], point.point[2]));
-      }
-      else{
-        cartesians.push(Cartesian3.fromDegrees(point.point[0], point.point[1]));
-      }
-    });
-
-    const addNotes = (positions: Cartesian3[]): void => {
-      positions.forEach((position: Cartesian3, i: number) => {
-        const iconIndex = Object.keys(this.options.icons).findIndex(
-          (icon) =>
-            icon === data[i].properties.icon ||
-            (this.options.icons[+icon] &&
-              this.options.icons[+icon].name === data[i].properties.icon)
-        );
-
-        if (iconIndex >= 0) {
-          const selected_icon_src = this.options.icons[+iconIndex].src
-          for (const hash of this.icons) {
-            const billBoardSource = (hash.image as any)._value;
-            if (billBoardSource === selected_icon_src){
-              const pin = {
-                position,
-                billboard: hash,
-                label : {
-                  text: (data[i].properties.label || ''),
-                  font : '16px sans-serif',
-                  eyeOffset : Cartesian3.ZERO,
-                  showBackground: true,
-                  pixelOffset : new Cartesian2(0,-20),
-                  data: data[i].properties,
-                  layerId: this.noteLayerId,
-                },
-                data: data[i].properties,
-                layerId: this.noteLayerId,
-              };
-              this.layer.entities.add(pin);
-            }
-          }
-        }
-      });
-    };
-
-    addNotes(cartesiansWith3D);
-    const updatedCartesiansWith3D = await this.mapObject.viewer.scene.clampToHeightMostDetailed(cartesians);
-    addNotes(updatedCartesiansWith3D);
-  }
-
-  /**
-   * Loads all specified note icons and adds them to the map. Icons must be loaded before they can be used.
-   */
-  private loadIcons() {
-    const self = this;
-    return new Promise<void>((resolve) => {
-      const loadCommands: any = [];
-      const { icons } = self.options;
-
-      Object.keys(icons).forEach((iconID: any) => {
-        if (iconID !== "contains") {
-          console.log(icons[iconID]);
-          loadCommands.push(self.load(icons[iconID]));
-        }
-      });
-      Promise.all(loadCommands)
-        .then(() => {
-          resolve();
-        })
-        .catch(() => {
-          const loadingElement = document.getElementById("main-loading");
-          if (loadingElement) {
-            loadingElement.style.display = "none";
-          }
-        });
-    });
-  }
-
-  /**
-   *
-   * @param { NoteIcon } icon - create bill board from icons
-   * @returns { void }
-   */
-  load(icon: NoteIcon) {
-    const self = this;
-    return new Promise<void>((resolve) => {
-      let url = icon.src;
-      if (
-        this.options.allowSVGs &&
-        (typeof icon.options.allowSVG === "undefined" || icon.options.allowSVG)
-      ) {
-        url = url.replace(".png", ".svg");
-      }
-      const { pixelRatio } = icon.options;
-      console.log(url);
-
-      const image: any = new Image();
-      const visibility = icon?.options?.deficiency === true ? 0 : Number.POSITIVE_INFINITY
-      image.onload = function () {
-        self.icons.push(
-          new BillboardGraphics({
-            image: url,
-            color: Color.WHITE.withAlpha(self.opacity || 1),
-            disableDepthTestDistance: visibility,
-            verticalOrigin: VerticalOrigin.BASELINE,
-            pixelOffset : new Cartesian2(0,-30),
-            width: this.width / +(pixelRatio || 4),
-            height: this.height / +(pixelRatio || 4),
-            rotation: cMath.toRadians(self.options.rotate || 0),
-          })
-        );
-        resolve();
-      };
-      image.src = url;
-    });
-  }
-
-  /** Set bounds after adding a layer */
-  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() {
-    var isMouseOverNote = false;
-    let hoverTimer: NodeJS.Timeout | undefined;
-
-    this.mapObject.addLayerListener('click', this.noteLayerId, (event: any) => {
-      if(this.options.onClick){
-        this.options.onClick(event);
-      }      
-    });
-
-    this.mapObject.addLayerListener(
-      'mousemove',
-      this.noteLayerId,
-      (e: any) => {
-        this.mapObject.viewer.canvas.style.cursor = 'pointer';
-        if (!isMouseOverNote) {
-          const hoverEvent = event
-          isMouseOverNote = true;
-          hoverTimer = setTimeout(() => {
-            if (this.options.onHover) {
-              this.options.onHover(e, hoverEvent);
-            }
-          }, 1000);
-        }
-      }
-    );
-
-    this.mapObject.addLayerListener(
-        'mouseenter',
-        this.noteLayerId,
-        (event: any) => {         
-          this.mapObject.viewer.canvas.style.cursor = 'pointer';
-        }
-    );
-
-    this.mapObject.addLayerListener('mouseout', this.noteLayerId, () => {
-      isMouseOverNote = false;
-      clearTimeout(hoverTimer);
-      this.mapObject.viewer.canvas.style.cursor = '';
-      if (this.options.clearHover) {
-        this.options.clearHover(event);
-      }
-    });
-}
-
-/** Removes all listeners added by this layer */
-public removeListeners() {
-    this.mapObject.removeLayerListeners(this.noteLayerId);
-}
-
-  /** 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();
-  }
-
-  /** enables visibility of the layer */
-  public show(): void {
-    this.layer.show = true;
-  }
-
-  /** Disables visibility of the layer */
-  public hide(): void {
-    this.layer.show = false;
-  }
-
-  /**
-   * Sets opacity of the layer
-   * @param opacity number between 0-1
-   */
-  public setOpacity(opacity: number): void {
-    this.opacity = opacity;
-    this.icons = [];
-    this.loadIcons().then(() => {
-      this.opacity = opacity;
-      this.remove();
-      this.buildLayer();
-      this.add(this.data);
-    });
-  }
-}

package/src/layers/ortho.ts

@@ -1,76 +0,0 @@
-import {
-  ImageryLayer,
-  WebMapServiceImageryProvider,
-  WebMercatorTilingScheme,
-} from "cesium";
-import type { LayerOptions, OrthoData } from "../app.interface";
-import type CesiumView from "../droneView";
-/**
- * Use this class to create a Ortho layer
- * @param {CesiumView} mapObject - The CesiumView map object
- * @param {string} uniqueName - The unique name of the layer
- * @param {OrthoData} data - The data to be used in the layer
- * @param {LayerOptions} options - The options for the layer (see {@link LayerOptions})
- */
-class RasterLayer {
-  imageryLayer: ImageryLayer;
-
-  orthoId: string;
-
-  constructor(
-    public mapObject: CesiumView,
-    public uniqueName: string,
-    public data: OrthoData,
-    public options: LayerOptions
-  ) {
-    this.orthoId = `ortho-layer-${uniqueName}`;
-
-    this.addRaster(data);
-  }
-
-  /**
-   * Add a raster layer to the map
-   * @param {OrthoData} data - The data to be used in the layer
-   */
-  addRaster(layer: OrthoData) {
-    let opacity = 1;
-
-    console.log(layer);
-    
-    const imageryLayer =
-      this.mapObject.viewer.scene.imageryLayers.addImageryProvider(
-        new WebMapServiceImageryProvider({
-          url: layer.url,
-          layers: 'ortho',
-          parameters: {
-            transparent: "true",
-            format: "image/png",
-          },
-          tileWidth: layer.tileSize || 256,
-          tileHeight: layer.tileSize || 256,
-          maximumLevel: layer.maxZoom || 23,
-          minimumLevel: layer.minZoom || 0,
-          credit: layer.credit,
-          tilingScheme: new WebMercatorTilingScheme(),
-        })
-      );
-
-    imageryLayer.alpha = opacity;
-
-    this.imageryLayer = imageryLayer;
-
-    // this.mapObject.viewer.zoomTo(this.imageryLayer)
-  }
-
-  /** Remove layer from map and destroy layer */
-  public remove(): void {
-    this.mapObject.viewer.scene.imageryLayers.remove(this.imageryLayer, true);
-    this.mapObject.viewer.scene.requestRender();
-  }
-
-  setOpacity(opacity: number) {
-    this.imageryLayer.alpha = opacity * 0.01;
-    this.mapObject.viewer.scene.requestRender();
-  }
-}
-export default RasterLayer;