@antv/l7-map 2.25.7 → 2.25.9

package/es/map/geo/transform.js

@@ -0,0 +1,736 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import Point from '@mapbox/point-geometry';
+import { mat2, mat4, vec4 } from 'gl-matrix';
+import { clamp, interpolates, wrap } from "../util/util";
+import { EdgeInsets } from "./edge_insets";
+import { LngLat } from "./lng_lat";
+import { LngLatBounds } from "./lng_lat_bounds";
+import { MercatorCoordinate, mercatorXfromLng, mercatorYfromLat, mercatorZfromAltitude } from "./mercator_coordinate";
+export const MAX_VALID_LATITUDE = 85.051129;
+
+/**
+ * @internal
+ * A single transform, generally used for a single tile to be
+ * scaled, rotated, and zoomed.
+ */
+export class Transform {
+  constructor(minZoom, maxZoom, minPitch, maxPitch, renderWorldCopies) {
+    _defineProperty(this, "tileSize", void 0);
+    _defineProperty(this, "tileZoom", void 0);
+    _defineProperty(this, "lngRange", void 0);
+    _defineProperty(this, "latRange", void 0);
+    _defineProperty(this, "scale", void 0);
+    _defineProperty(this, "width", void 0);
+    _defineProperty(this, "height", void 0);
+    _defineProperty(this, "angle", void 0);
+    _defineProperty(this, "rotationMatrix", void 0);
+    _defineProperty(this, "pixelsToGLUnits", void 0);
+    _defineProperty(this, "cameraToCenterDistance", void 0);
+    _defineProperty(this, "mercatorMatrix", void 0);
+    _defineProperty(this, "projMatrix", void 0);
+    _defineProperty(this, "invProjMatrix", void 0);
+    _defineProperty(this, "alignedProjMatrix", void 0);
+    _defineProperty(this, "pixelMatrix", void 0);
+    _defineProperty(this, "pixelMatrix3D", void 0);
+    _defineProperty(this, "pixelMatrixInverse", void 0);
+    _defineProperty(this, "glCoordMatrix", void 0);
+    _defineProperty(this, "labelPlaneMatrix", void 0);
+    _defineProperty(this, "minElevationForCurrentTile", void 0);
+    _defineProperty(this, "_fov", void 0);
+    _defineProperty(this, "_pitch", void 0);
+    _defineProperty(this, "_zoom", void 0);
+    _defineProperty(this, "_unmodified", void 0);
+    _defineProperty(this, "_renderWorldCopies", void 0);
+    _defineProperty(this, "_minZoom", void 0);
+    _defineProperty(this, "_maxZoom", void 0);
+    _defineProperty(this, "_minPitch", void 0);
+    _defineProperty(this, "_maxPitch", void 0);
+    _defineProperty(this, "_center", void 0);
+    _defineProperty(this, "_elevation", void 0);
+    _defineProperty(this, "_pixelPerMeter", void 0);
+    _defineProperty(this, "_edgeInsets", void 0);
+    _defineProperty(this, "_constraining", void 0);
+    _defineProperty(this, "_posMatrixCache", void 0);
+    _defineProperty(this, "_alignedPosMatrixCache", void 0);
+    this.tileSize = 512; // constant
+
+    this._renderWorldCopies = renderWorldCopies === undefined ? true : !!renderWorldCopies;
+    this._minZoom = minZoom || 0;
+    this._maxZoom = maxZoom || 22;
+    this._minPitch = minPitch === undefined || minPitch === null ? 0 : minPitch;
+    this._maxPitch = maxPitch === undefined || maxPitch === null ? 60 : maxPitch;
+    this.setMaxBounds();
+    this.width = 0;
+    this.height = 0;
+    this._center = new LngLat(0, 0);
+    this._elevation = 0;
+    this.zoom = 0;
+    this.angle = 0;
+    this._fov = 0.6435011087932844;
+    this._pitch = 0;
+    this._unmodified = true;
+    this._edgeInsets = new EdgeInsets();
+    this._posMatrixCache = {};
+    this._alignedPosMatrixCache = {};
+    this.minElevationForCurrentTile = 0;
+  }
+  clone() {
+    const clone = new Transform(this._minZoom, this._maxZoom, this._minPitch, this.maxPitch, this._renderWorldCopies);
+    clone.apply(this);
+    return clone;
+  }
+  apply(that) {
+    this.tileSize = that.tileSize;
+    this.latRange = that.latRange;
+    this.width = that.width;
+    this.height = that.height;
+    this._center = that._center;
+    this._elevation = that._elevation;
+    this.minElevationForCurrentTile = that.minElevationForCurrentTile;
+    this.zoom = that.zoom;
+    this.angle = that.angle;
+    this._fov = that._fov;
+    this._pitch = that._pitch;
+    this._unmodified = that._unmodified;
+    this._edgeInsets = that._edgeInsets.clone();
+    this._calcMatrices();
+  }
+  get minZoom() {
+    return this._minZoom;
+  }
+  set minZoom(zoom) {
+    if (this._minZoom === zoom) return;
+    this._minZoom = zoom;
+    this.zoom = Math.max(this.zoom, zoom);
+  }
+  get maxZoom() {
+    return this._maxZoom;
+  }
+  set maxZoom(zoom) {
+    if (this._maxZoom === zoom) return;
+    this._maxZoom = zoom;
+    this.zoom = Math.min(this.zoom, zoom);
+  }
+  get minPitch() {
+    return this._minPitch;
+  }
+  set minPitch(pitch) {
+    if (this._minPitch === pitch) return;
+    this._minPitch = pitch;
+    this.pitch = Math.max(this.pitch, pitch);
+  }
+  get maxPitch() {
+    return this._maxPitch;
+  }
+  set maxPitch(pitch) {
+    if (this._maxPitch === pitch) return;
+    this._maxPitch = pitch;
+    this.pitch = Math.min(this.pitch, pitch);
+  }
+  get renderWorldCopies() {
+    return this._renderWorldCopies;
+  }
+  set renderWorldCopies(renderWorldCopies) {
+    if (renderWorldCopies === undefined) {
+      renderWorldCopies = true;
+    } else if (renderWorldCopies === null) {
+      renderWorldCopies = false;
+    }
+    this._renderWorldCopies = renderWorldCopies;
+  }
+  get worldSize() {
+    return this.tileSize * this.scale;
+  }
+  get centerOffset() {
+    return this.centerPoint._sub(this.size._div(2));
+  }
+  get size() {
+    return new Point(this.width, this.height);
+  }
+  get bearing() {
+    return -this.angle / Math.PI * 180;
+  }
+  set bearing(bearing) {
+    const b = -wrap(bearing, -180, 180) * Math.PI / 180;
+    if (this.angle === b) return;
+    this._unmodified = false;
+    this.angle = b;
+    this._calcMatrices();
+
+    // 2x2 matrix for rotating points
+    this.rotationMatrix = mat2.create();
+    mat2.rotate(this.rotationMatrix, this.rotationMatrix, this.angle);
+  }
+  get pitch() {
+    return this._pitch / Math.PI * 180;
+  }
+  set pitch(pitch) {
+    const p = clamp(pitch, this.minPitch, this.maxPitch) / 180 * Math.PI;
+    if (this._pitch === p) return;
+    this._unmodified = false;
+    this._pitch = p;
+    this._calcMatrices();
+  }
+  get fov() {
+    return this._fov / Math.PI * 180;
+  }
+  set fov(fov) {
+    fov = Math.max(0.01, Math.min(60, fov));
+    if (this._fov === fov) return;
+    this._unmodified = false;
+    this._fov = fov / 180 * Math.PI;
+    this._calcMatrices();
+  }
+  get zoom() {
+    return this._zoom;
+  }
+  set zoom(zoom) {
+    const constrainedZoom = Math.min(Math.max(zoom, this.minZoom), this.maxZoom);
+    if (this._zoom === constrainedZoom) return;
+    this._unmodified = false;
+    this._zoom = constrainedZoom;
+    this.tileZoom = Math.max(0, Math.floor(constrainedZoom));
+    this.scale = this.zoomScale(constrainedZoom);
+    this._constrain();
+    this._calcMatrices();
+  }
+  get center() {
+    return this._center;
+  }
+  set center(center) {
+    if (center.lat === this._center.lat && center.lng === this._center.lng) return;
+    this._unmodified = false;
+    this._center = center;
+    this._constrain();
+    this._calcMatrices();
+  }
+
+  /**
+   * Elevation at current center point, meters above sea level
+   */
+  get elevation() {
+    return this._elevation;
+  }
+  set elevation(elevation) {
+    if (elevation === this._elevation) return;
+    this._elevation = elevation;
+    this._constrain();
+    this._calcMatrices();
+  }
+  get padding() {
+    return this._edgeInsets.toJSON();
+  }
+  set padding(padding) {
+    if (this._edgeInsets.equals(padding)) return;
+    this._unmodified = false;
+    //Update edge-insets inplace
+    this._edgeInsets.interpolate(this._edgeInsets, padding, 1);
+    this._calcMatrices();
+  }
+
+  /**
+   * The center of the screen in pixels with the top-left corner being (0,0)
+   * and +y axis pointing downwards. This accounts for padding.
+   */
+  get centerPoint() {
+    return this._edgeInsets.getCenter(this.width, this.height);
+  }
+
+  /**
+   * Returns if the padding params match
+   *
+   * @param padding - the padding to check against
+   * @returns true if they are equal, false otherwise
+   */
+  isPaddingEqual(padding) {
+    return this._edgeInsets.equals(padding);
+  }
+
+  /**
+   * Helper method to update edge-insets in place
+   *
+   * @param start - the starting padding
+   * @param target - the target padding
+   * @param t - the step/weight
+   */
+  interpolatePadding(start, target, t) {
+    this._unmodified = false;
+    this._edgeInsets.interpolate(start, target, t);
+    this._constrain();
+    this._calcMatrices();
+  }
+
+  /**
+   * Return a zoom level that will cover all tiles the transform
+   * @param options - the options
+   * @returns zoom level An integer zoom level at which all tiles will be visible.
+   */
+  coveringZoomLevel(options) {
+    const z = (options.roundZoom ? Math.round : Math.floor)(this.zoom + this.scaleZoom(this.tileSize / options.tileSize));
+    // At negative zoom levels load tiles from z0 because negative tile zoom levels don't exist.
+    return Math.max(0, z);
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.pixelsToGLUnits = [2 / width, -2 / height];
+    this._constrain();
+    this._calcMatrices();
+  }
+  get unmodified() {
+    return this._unmodified;
+  }
+  zoomScale(zoom) {
+    return Math.pow(2, zoom);
+  }
+  scaleZoom(scale) {
+    return Math.log(scale) / Math.LN2;
+  }
+
+  /**
+   * Convert from LngLat to world coordinates (Mercator coordinates scaled by 512)
+   * @param lnglat - the lngLat
+   * @returns Point
+   */
+  project(lnglat) {
+    const lat = clamp(lnglat.lat, -MAX_VALID_LATITUDE, MAX_VALID_LATITUDE);
+    return new Point(mercatorXfromLng(lnglat.lng) * this.worldSize, mercatorYfromLat(lat) * this.worldSize);
+  }
+
+  /**
+   * Convert from world coordinates ([0, 512],[0, 512]) to LngLat ([-180, 180], [-90, 90])
+   * @param point - world coordinate
+   * @returns LngLat
+   */
+  unproject(point) {
+    return new MercatorCoordinate(point.x / this.worldSize, point.y / this.worldSize).toLngLat();
+  }
+  get point() {
+    return this.project(this.center);
+  }
+
+  /**
+   * get the camera position in LngLat and altitudes in meter
+   * @returns An object with lngLat & altitude.
+   */
+  getCameraPosition() {
+    const lngLat = this.pointLocation(this.getCameraPoint());
+    const altitude = Math.cos(this._pitch) * this.cameraToCenterDistance / this._pixelPerMeter;
+    return {
+      lngLat,
+      altitude: altitude + this.elevation
+    };
+  }
+  setLocationAtPoint(lnglat, point) {
+    const a = this.pointCoordinate(point);
+    const b = this.pointCoordinate(this.centerPoint);
+    const loc = this.locationCoordinate(lnglat);
+    const newCenter = new MercatorCoordinate(loc.x - (a.x - b.x), loc.y - (a.y - b.y));
+    this.center = this.coordinateLocation(newCenter);
+    if (this._renderWorldCopies) {
+      this.center = this.center.wrap();
+    }
+  }
+
+  /**
+   * Given a LngLat location, return the screen point that corresponds to it
+   * @param lnglat - location
+   * @param terrain - optional terrain
+   * @returns screen point
+   */
+  locationPoint(lnglat) {
+    return this.coordinatePoint(this.locationCoordinate(lnglat));
+  }
+
+  /**
+   * Given a point on screen, return its lnglat
+   * @param p - screen point
+   * @param terrain - optional terrain
+   * @returns lnglat location
+   */
+  pointLocation(p) {
+    return this.coordinateLocation(this.pointCoordinate(p));
+  }
+
+  /**
+   * Given a geographical lnglat, return an unrounded
+   * coordinate that represents it at low zoom level.
+   * @param lnglat - the location
+   * @returns The mercator coordinate
+   */
+  locationCoordinate(lnglat) {
+    return MercatorCoordinate.fromLngLat(lnglat);
+  }
+
+  /**
+   * Given a Coordinate, return its geographical position.
+   * @param coord - mercator coordinates
+   * @returns lng and lat
+   */
+  coordinateLocation(coord) {
+    return coord && coord.toLngLat();
+  }
+
+  /**
+   * Given a Point, return its mercator coordinate.
+   * @param p - the point
+   * @param terrain - optional terrain
+   * @returns lnglat
+   */
+  pointCoordinate(p) {
+    // calculate point-coordinate on flat earth
+    const targetZ = 0;
+    // since we don't know the correct projected z value for the point,
+    // unproject two points to get a line and then find the point on that
+    // line with z=0
+
+    const coord0 = [p.x, p.y, 0, 1];
+    const coord1 = [p.x, p.y, 1, 1];
+    vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse);
+    vec4.transformMat4(coord1, coord1, this.pixelMatrixInverse);
+    const w0 = coord0[3];
+    const w1 = coord1[3];
+    const x0 = coord0[0] / w0;
+    const x1 = coord1[0] / w1;
+    const y0 = coord0[1] / w0;
+    const y1 = coord1[1] / w1;
+    const z0 = coord0[2] / w0;
+    const z1 = coord1[2] / w1;
+    const t = z0 === z1 ? 0 : (targetZ - z0) / (z1 - z0);
+    return new MercatorCoordinate(interpolates.number(x0, x1, t) / this.worldSize, interpolates.number(y0, y1, t) / this.worldSize);
+  }
+
+  /**
+   * Given a coordinate, return the screen point that corresponds to it
+   * @param coord - the coordinates
+   * @param elevation - the elevation
+   * @param pixelMatrix - the pixel matrix
+   * @returns screen point
+   */
+  coordinatePoint(coord, elevation = 0, pixelMatrix = this.pixelMatrix) {
+    const p = [coord.x * this.worldSize, coord.y * this.worldSize, elevation, 1];
+    vec4.transformMat4(p, p, pixelMatrix);
+    return new Point(p[0] / p[3], p[1] / p[3]);
+  }
+
+  /**
+   * Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not
+   * an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region.
+   * @returns Returns a {@link LngLatBounds} object describing the map's geographical bounds.
+   */
+  getBounds() {
+    const top = Math.max(0, this.height / 2 - this.getHorizon());
+    return new LngLatBounds().extend(this.pointLocation(new Point(0, top))).extend(this.pointLocation(new Point(this.width, top))).extend(this.pointLocation(new Point(this.width, this.height))).extend(this.pointLocation(new Point(0, this.height)));
+  }
+
+  /**
+   * Returns the maximum geographical bounds the map is constrained to, or `null` if none set.
+   * @returns max bounds
+   */
+  getMaxBounds() {
+    if (!this.latRange || this.latRange.length !== 2 || !this.lngRange || this.lngRange.length !== 2) return null;
+    return new LngLatBounds([this.lngRange[0], this.latRange[0]], [this.lngRange[1], this.latRange[1]]);
+  }
+
+  /**
+   * Calculate pixel height of the visible horizon in relation to map-center (e.g. height/2),
+   * multiplied by a static factor to simulate the earth-radius.
+   * The calculated value is the horizontal line from the camera-height to sea-level.
+   * @returns Horizon above center in pixels.
+   */
+  getHorizon() {
+    return Math.tan(Math.PI / 2 - this._pitch) * this.cameraToCenterDistance * 0.85;
+  }
+
+  /**
+   * Sets or clears the map's geographical constraints.
+   * @param bounds - A {@link LngLatBounds} object describing the new geographic boundaries of the map.
+   */
+  setMaxBounds(bounds) {
+    if (bounds) {
+      this.lngRange = [bounds.getWest(), bounds.getEast()];
+      this.latRange = [bounds.getSouth(), bounds.getNorth()];
+      this._constrain();
+    } else {
+      this.lngRange = null;
+      this.latRange = [-MAX_VALID_LATITUDE, MAX_VALID_LATITUDE];
+    }
+  }
+  customLayerMatrix() {
+    return mat4.clone(this.mercatorMatrix);
+  }
+
+  /**
+   * Get center lngLat and zoom to ensure that
+   * 1) everything beyond the bounds is excluded
+   * 2) a given lngLat is as near the center as possible
+   * Bounds are those set by maxBounds or North & South "Poles" and, if only 1 globe is displayed, antimeridian.
+   */
+  getConstrained(lngLat, zoom) {
+    zoom = clamp(+zoom, this.minZoom, this.maxZoom);
+    const result = {
+      center: new LngLat(lngLat.lng, lngLat.lat),
+      zoom
+    };
+    let lngRange = this.lngRange;
+    if (!this._renderWorldCopies && lngRange === null) {
+      const almost180 = 180 - 1e-10;
+      lngRange = [-almost180, almost180];
+    }
+    const worldSize = this.tileSize * this.zoomScale(result.zoom); // A world size for the requested zoom level, not the current world size
+    let minY = 0;
+    let maxY = worldSize;
+    let minX = 0;
+    let maxX = worldSize;
+    let scaleY = 0;
+    let scaleX = 0;
+    const {
+      x: screenWidth,
+      y: screenHeight
+    } = this.size;
+    if (this.latRange) {
+      const latRange = this.latRange;
+      minY = mercatorYfromLat(latRange[1]) * worldSize;
+      maxY = mercatorYfromLat(latRange[0]) * worldSize;
+      const shouldZoomIn = maxY - minY < screenHeight;
+      if (shouldZoomIn) scaleY = screenHeight / (maxY - minY);
+    }
+    if (lngRange) {
+      minX = wrap(mercatorXfromLng(lngRange[0]) * worldSize, 0, worldSize);
+      maxX = wrap(mercatorXfromLng(lngRange[1]) * worldSize, 0, worldSize);
+      if (maxX < minX) maxX += worldSize;
+      const shouldZoomIn = maxX - minX < screenWidth;
+      if (shouldZoomIn) scaleX = screenWidth / (maxX - minX);
+    }
+    const {
+      x: originalX,
+      y: originalY
+    } = this.project.call({
+      worldSize
+    }, lngLat);
+    let modifiedX, modifiedY;
+    const scale = Math.max(scaleX || 0, scaleY || 0);
+    if (scale) {
+      // zoom in to exclude all beyond the given lng/lat ranges
+      const newPoint = new Point(scaleX ? (maxX + minX) / 2 : originalX, scaleY ? (maxY + minY) / 2 : originalY);
+      result.center = this.unproject.call({
+        worldSize
+      }, newPoint).wrap();
+      result.zoom += this.scaleZoom(scale);
+      return result;
+    }
+    if (this.latRange) {
+      const h2 = screenHeight / 2;
+      if (originalY - h2 < minY) modifiedY = minY + h2;
+      if (originalY + h2 > maxY) modifiedY = maxY - h2;
+    }
+    if (lngRange) {
+      const centerX = (minX + maxX) / 2;
+      let wrappedX = originalX;
+      if (this._renderWorldCopies) {
+        wrappedX = wrap(originalX, centerX - worldSize / 2, centerX + worldSize / 2);
+      }
+      const w2 = screenWidth / 2;
+      if (wrappedX - w2 < minX) modifiedX = minX + w2;
+      if (wrappedX + w2 > maxX) modifiedX = maxX - w2;
+    }
+
+    // pan the map if the screen goes off the range
+    if (modifiedX !== undefined || modifiedY !== undefined) {
+      var _modifiedX, _modifiedY;
+      const newPoint = new Point((_modifiedX = modifiedX) !== null && _modifiedX !== void 0 ? _modifiedX : originalX, (_modifiedY = modifiedY) !== null && _modifiedY !== void 0 ? _modifiedY : originalY);
+      result.center = this.unproject.call({
+        worldSize
+      }, newPoint).wrap();
+    }
+    return result;
+  }
+  _constrain() {
+    if (!this.center || !this.width || !this.height || this._constraining) return;
+    this._constraining = true;
+    const unmodified = this._unmodified;
+    const {
+      center,
+      zoom
+    } = this.getConstrained(this.center, this.zoom);
+    this.center = center;
+    this.zoom = zoom;
+    this._unmodified = unmodified;
+    this._constraining = false;
+  }
+  _calcMatrices() {
+    if (!this.height) return;
+    const halfFov = this._fov / 2;
+    const offset = this.centerOffset;
+    const x = this.point.x,
+      y = this.point.y;
+    this.cameraToCenterDistance = 0.5 / Math.tan(halfFov) * this.height;
+    this._pixelPerMeter = mercatorZfromAltitude(1, this.center.lat) * this.worldSize;
+    let m = mat4.identity(new Float64Array(16));
+    mat4.scale(m, m, [this.width / 2, -this.height / 2, 1]);
+    mat4.translate(m, m, [1, -1, 0]);
+    this.labelPlaneMatrix = m;
+    m = mat4.identity(new Float64Array(16));
+    mat4.scale(m, m, [1, -1, 1]);
+    mat4.translate(m, m, [-1, -1, 0]);
+    mat4.scale(m, m, [2 / this.width, 2 / this.height, 1]);
+    this.glCoordMatrix = m;
+
+    // Calculate the camera to sea-level distance in pixel in respect of terrain
+    const cameraToSeaLevelDistance = this.cameraToCenterDistance + this._elevation * this._pixelPerMeter / Math.cos(this._pitch);
+    // In case of negative minimum elevation (e.g. the dead see, under the sea maps) use a lower plane for calculation
+    const minElevation = Math.min(this.elevation, this.minElevationForCurrentTile);
+    const cameraToLowestPointDistance = cameraToSeaLevelDistance - minElevation * this._pixelPerMeter / Math.cos(this._pitch);
+    const lowestPlane = minElevation < 0 ? cameraToLowestPointDistance : cameraToSeaLevelDistance;
+
+    // Find the distance from the center point [width/2 + offset.x, height/2 + offset.y] to the
+    // center top point [width/2 + offset.x, 0] in Z units, using the law of sines.
+    // 1 Z unit is equivalent to 1 horizontal px at the center of the map
+    // (the distance between[width/2, height/2] and [width/2 + 1, height/2])
+    const groundAngle = Math.PI / 2 + this._pitch;
+    const fovAboveCenter = this._fov * (0.5 + offset.y / this.height);
+    const topHalfSurfaceDistance = Math.sin(fovAboveCenter) * lowestPlane / Math.sin(clamp(Math.PI - groundAngle - fovAboveCenter, 0.01, Math.PI - 0.01));
+
+    // Find the distance from the center point to the horizon
+    const horizon = this.getHorizon();
+    const horizonAngle = Math.atan(horizon / this.cameraToCenterDistance);
+    const fovCenterToHorizon = 2 * horizonAngle * (0.5 + offset.y / (horizon * 2));
+    const topHalfSurfaceDistanceHorizon = Math.sin(fovCenterToHorizon) * lowestPlane / Math.sin(clamp(Math.PI - groundAngle - fovCenterToHorizon, 0.01, Math.PI - 0.01));
+
+    // Calculate z distance of the farthest fragment that should be rendered.
+    // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
+    const topHalfMinDistance = Math.min(topHalfSurfaceDistance, topHalfSurfaceDistanceHorizon);
+    const farZ = (Math.cos(Math.PI / 2 - this._pitch) * topHalfMinDistance + lowestPlane) * 1.01;
+
+    // The larger the value of nearZ is
+    // - the more depth precision is available for features (good)
+    // - clipping starts appearing sooner when the camera is close to 3d features (bad)
+    //
+    // Other values work for mapbox-gl-js but deckgl was encountering precision issues
+    // when rendering custom layers. This value was experimentally chosen and
+    // seems to solve z-fighting issues in deckgl while not clipping buildings too close to the camera.
+    const nearZ = this.height / 50;
+
+    // matrix for conversion from location to clip space(-1 .. 1)
+    m = new Float64Array(16);
+    mat4.perspective(m, this._fov, this.width / this.height, nearZ, farZ);
+
+    // Apply center of perspective offset
+    m[8] = -offset.x * 2 / this.width;
+    m[9] = offset.y * 2 / this.height;
+    mat4.scale(m, m, [1, -1, 1]);
+    mat4.translate(m, m, [0, 0, -this.cameraToCenterDistance]);
+    mat4.rotateX(m, m, this._pitch);
+    mat4.rotateZ(m, m, this.angle);
+    mat4.translate(m, m, [-x, -y, 0]);
+
+    // The mercatorMatrix can be used to transform points from mercator coordinates
+    // ([0, 0] nw, [1, 1] se) to clip space.
+    this.mercatorMatrix = mat4.scale([], m, [this.worldSize, this.worldSize, this.worldSize]);
+
+    // scale vertically to meters per pixel (inverse of ground resolution):
+    mat4.scale(m, m, [1, 1, this._pixelPerMeter]);
+
+    // matrix for conversion from world space to screen coordinates in 2D
+    this.pixelMatrix = mat4.multiply(new Float64Array(16), this.labelPlaneMatrix, m);
+
+    // matrix for conversion from world space to clip space (-1 .. 1)
+    mat4.translate(m, m, [0, 0, -this.elevation]); // elevate camera over terrain
+    this.projMatrix = m;
+    this.invProjMatrix = mat4.invert([], m);
+
+    // matrix for conversion from world space to screen coordinates in 3D
+    this.pixelMatrix3D = mat4.multiply(new Float64Array(16), this.labelPlaneMatrix, m);
+
+    // Make a second projection matrix that is aligned to a pixel grid for rendering raster tiles.
+    // We're rounding the (floating point) x/y values to achieve to avoid rendering raster images to fractional
+    // coordinates. Additionally, we adjust by half a pixel in either direction in case that viewport dimension
+    // is an odd integer to preserve rendering to the pixel grid. We're rotating this shift based on the angle
+    // of the transformation so that 0°, 90°, 180°, and 270° rasters are crisp, and adjust the shift so that
+    // it is always <= 0.5 pixels.
+    const xShift = this.width % 2 / 2,
+      yShift = this.height % 2 / 2,
+      angleCos = Math.cos(this.angle),
+      angleSin = Math.sin(this.angle),
+      dx = x - Math.round(x) + angleCos * xShift + angleSin * yShift,
+      dy = y - Math.round(y) + angleCos * yShift + angleSin * xShift;
+    const alignedM = new Float64Array(m);
+    mat4.translate(alignedM, alignedM, [dx > 0.5 ? dx - 1 : dx, dy > 0.5 ? dy - 1 : dy, 0]);
+    this.alignedProjMatrix = alignedM;
+
+    // inverse matrix for conversion from screen coordinates to location
+    m = mat4.invert(new Float64Array(16), this.pixelMatrix);
+    if (!m) throw new Error('failed to invert matrix');
+    this.pixelMatrixInverse = m;
+    this._posMatrixCache = {};
+    this._alignedPosMatrixCache = {};
+  }
+  maxPitchScaleFactor() {
+    // calcMatrices hasn't run yet
+    if (!this.pixelMatrixInverse) return 1;
+    const coord = this.pointCoordinate(new Point(0, 0));
+    const p = [coord.x * this.worldSize, coord.y * this.worldSize, 0, 1];
+    const topPoint = vec4.transformMat4(p, p, this.pixelMatrix);
+    return topPoint[3] / this.cameraToCenterDistance;
+  }
+
+  /**
+   * The camera looks at the map from a 3D (lng, lat, altitude) location. Let's use `cameraLocation`
+   * as the name for the location under the camera and on the surface of the earth (lng, lat, 0).
+   * `cameraPoint` is the projected position of the `cameraLocation`.
+   *
+   * This point is useful to us because only fill-extrusions that are between `cameraPoint` and
+   * the query point on the surface of the earth can extend and intersect the query.
+   *
+   * When the map is not pitched the `cameraPoint` is equivalent to the center of the map because
+   * the camera is right above the center of the map.
+   */
+  getCameraPoint() {
+    const pitch = this._pitch;
+    const yOffset = Math.tan(pitch) * (this.cameraToCenterDistance || 1);
+    return this.centerPoint.add(new Point(0, yOffset));
+  }
+
+  /**
+   * When the map is pitched, some of the 3D features that intersect a query will not intersect
+   * the query at the surface of the earth. Instead the feature may be closer and only intersect
+   * the query because it extrudes into the air.
+   * @param queryGeometry - For point queries, the line from the query point to the "camera point",
+   * for other geometries, the envelope of the query geometry and the "camera point"
+   * @returns a geometry that includes all of the original query as well as all possible ares of the
+   * screen where the *base* of a visible extrusion could be.
+   *
+   */
+  getCameraQueryGeometry(queryGeometry) {
+    const c = this.getCameraPoint();
+    if (queryGeometry.length === 1) {
+      return [queryGeometry[0], c];
+    } else {
+      let minX = c.x;
+      let minY = c.y;
+      let maxX = c.x;
+      let maxY = c.y;
+      for (const p of queryGeometry) {
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+        maxX = Math.max(maxX, p.x);
+        maxY = Math.max(maxY, p.y);
+      }
+      return [new Point(minX, minY), new Point(maxX, minY), new Point(maxX, maxY), new Point(minX, maxY), new Point(minX, minY)];
+    }
+  }
+  /**
+   * Return the distance to the camera in clip space from a LngLat.
+   * This can be compared to the value from the depth buffer (terrain.depthAtPoint)
+   * to determine whether a point is occluded.
+   * @param lngLat - the point
+   * @param elevation - the point's elevation
+   * @returns depth value in clip space (between 0 and 1)
+   */
+  lngLatToCameraDepth(lngLat, elevation) {
+    const coord = this.locationCoordinate(lngLat);
+    const p = [coord.x * this.worldSize, coord.y * this.worldSize, elevation, 1];
+    vec4.transformMat4(p, p, this.projMatrix);
+    return p[2] / p[3];
+  }
+}