@allmaps/maplibre/dist/WarpedMapLayer.js

MapLibre classes for Allmaps

import { WebGL2Renderer } from "@allmaps/render/webgl2";
import { Viewport, WarpedMapEvent } from "@allmaps/render";
import { rectangleToSize, sizesToScale } from "@allmaps/stdlib";
import { lonLatToWebMercator } from "@allmaps/project";
import { BaseWarpedMapLayer } from "@allmaps/warpedmaplayer";
const DEFFAULT_SPECIFIC_MAPLIBRE_WARPED_MAP_LAYER_OPTIONS = {
  layerId: "warped-map-layer",
  layerType: "custom",
  layerRenderingMode: "2d"
};
class WarpedMapLayer extends BaseWarpedMapLayer {
  id;
  type;
  renderingMode;
  map;
  /**
   * Creates a WarpedMapLayer instance
   *
   * @param id - Unique ID for this layer
   * @param options - options
   */
  constructor(options) {
    super(DEFFAULT_SPECIFIC_MAPLIBRE_WARPED_MAP_LAYER_OPTIONS, options);
    this.id = this.options.layerId;
    this.type = this.options.layerType;
    this.renderingMode = this.options.layerRenderingMode;
  }
  /**
   * Method called when the layer has been added to the Map.
   *
   * @param map - The Map this custom layer was just added to.
   * @param gl - The WebGL 2 context for the map.
   */
  onAdd(map, gl) {
    this.map = map;
    this.renderer = new WebGL2Renderer(gl, this.options);
    this.addEventListeners();
    this.map.on("webglcontextlost", this.contextLost.bind(this));
    this.map.on("webglcontextrestored", this.contextRestored.bind(this));
  }
  /**
   * Method called when the layer has been removed from the Map.
   */
  onRemove() {
    if (!this.renderer) {
      return;
    }
    this.removeEventListeners();
    this.map?.off("webglcontextlost", this.contextLost.bind(this));
    this.map?.off("webglcontextrestored", this.contextRestored.bind(this));
    this.renderer.destroy();
  }
  /**
   * Get the bounding box of all maps  as a MapLibre LngLatBoundsLike object
   *
   * This is the default MapLibre getBounds() function
   *
   * Result is in longitude/latitude `EPSG:4326` coordinates.
   *
   * @returns bounding box of all warped maps
   */
  getBounds() {
    BaseWarpedMapLayer.assertRenderer(this.renderer);
    const bbox = this.renderer.warpedMapList.getMapsBbox({
      projection: { definition: "EPSG:4326" }
    });
    if (bbox) {
      return [
        [bbox[0], bbox[1]],
        [bbox[2], bbox[3]]
      ];
    }
  }
  // /**
  //  * Prepare rendering the layer.
  //  */
  // preparerender(): void {
  //   // Empty function to make TypeScript happy
  // }
  /**
   * Render the layer.
   */
  render() {
    if (!this.map) {
      return;
    }
    if (!this.renderer) {
      return;
    }
    const canvas = this.map.getCanvas();
    const viewportSize = [
      canvas.width / window.devicePixelRatio,
      canvas.height / window.devicePixelRatio
    ];
    const geoCenterAsLngLat = this.map.getCenter();
    const projectedGeoCenter = lonLatToWebMercator([
      geoCenterAsLngLat.lng,
      geoCenterAsLngLat.lat
    ]);
    const geoLowerLeftAsLngLat = this.map.unproject([0, viewportSize[1]]);
    const geoLowerRightAsLngLat = this.map.unproject([
      viewportSize[0],
      viewportSize[1]
    ]);
    const geoUpperRightAsLngLat = this.map.unproject([viewportSize[0], 0]);
    const geoUpperLeftAsLngLat = this.map.unproject([0, 0]);
    const projectedGeoLowerLeftAsPoint = lonLatToWebMercator([
      geoLowerLeftAsLngLat.lng,
      geoLowerLeftAsLngLat.lat
    ]);
    const projectedGeoLowerRightAsPoint = lonLatToWebMercator([
      geoLowerRightAsLngLat.lng,
      geoLowerRightAsLngLat.lat
    ]);
    const projectedGeoUpperRightAsPoint = lonLatToWebMercator([
      geoUpperRightAsLngLat.lng,
      geoUpperRightAsLngLat.lat
    ]);
    const projectedGeoUpperLeftAsPoint = lonLatToWebMercator([
      geoUpperLeftAsLngLat.lng,
      geoUpperLeftAsLngLat.lat
    ]);
    const projectedGeoRectangle = [
      projectedGeoLowerLeftAsPoint,
      projectedGeoLowerRightAsPoint,
      projectedGeoUpperRightAsPoint,
      projectedGeoUpperLeftAsPoint
    ];
    const projectedGeoSize = rectangleToSize(projectedGeoRectangle);
    const projectedGeoPerViewportScale = sizesToScale(
      projectedGeoSize,
      viewportSize
    );
    const rotation = -(this.map.getBearing() / 180) * Math.PI;
    const devicePixelRatio = window.devicePixelRatio;
    const viewport = new Viewport(
      viewportSize,
      projectedGeoCenter,
      projectedGeoPerViewportScale,
      { rotation, devicePixelRatio }
    );
    this.renderer.render(viewport);
  }
  // Functions defined as abstract in base class
  /**
   * Trigger the native update function of the map
   */
  nativeUpdate() {
    this.map?.triggerRepaint();
  }
  /**
   * Pass events
   */
  nativePassWarpedMapEvent(event) {
    if (event instanceof WarpedMapEvent) {
      if (this.map) {
        this.map.fire(event.type, event.data);
      }
    }
  }
}
export {
  WarpedMapLayer
};
//# sourceMappingURL=WarpedMapLayer.js.map