@antv/l7-map 2.9.21 → 2.9.22-alpha.0

package/es/geo/transform.js

@@ -1,6 +1,5 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
@@ -8,92 +7,25 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+// @ts-ignore
 import { isMini } from '@antv/l7-utils';
 import { mat2, mat4, vec4 } from 'gl-matrix';
-import Point from '../geo/point';
-import { clamp, interpolate, wrap } from '../util';
-import EdgeInsets from './edge_insets';
-import LngLat from './lng_lat';
-import LngLatBounds from './lng_lat_bounds';
-import MercatorCoordinate, { mercatorXfromLng, mercatorYfromLat, mercatorZfromAltitude } from './mercator';
+import Point from "../geo/point";
+import { clamp, interpolate, wrap } from "../util";
+import EdgeInsets from "./edge_insets";
+import LngLat from "./lng_lat";
+import LngLatBounds from "./lng_lat_bounds";
+import MercatorCoordinate, { mercatorXfromLng, mercatorYfromLat, mercatorZfromAltitude } from "./mercator";
 export var EXTENT = 8192;
 
-var Transform = function () {
+var Transform = /*#__PURE__*/function () {
   function Transform(minZoom, maxZoom, minPitch, maxPitch, renderWorldCopies) {
     _classCallCheck(this, Transform);
 
-    _defineProperty(this, "tileSize", void 0);
+    this.tileSize = 512; // constant
 
-    _defineProperty(this, "tileZoom", void 0);
+    this.maxValidLatitude = 85.051129; // constant
 
-    _defineProperty(this, "lngRange", void 0);
-
-    _defineProperty(this, "latRange", void 0);
-
-    _defineProperty(this, "maxValidLatitude", 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, "pixelMatrixInverse", void 0);
-
-    _defineProperty(this, "glCoordMatrix", void 0);
-
-    _defineProperty(this, "labelPlaneMatrix", void 0);
-
-    _defineProperty(this, "_fov", void 0);
-
-    _defineProperty(this, "_pitch", void 0);
-
-    _defineProperty(this, "_zoom", 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, "zoomFraction", void 0);
-
-    _defineProperty(this, "unmodified", 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;
-    this.maxValidLatitude = 85.051129;
     this._renderWorldCopies = renderWorldCopies === undefined ? true : renderWorldCopies;
     this._minZoom = minZoom || 0;
     this._maxZoom = maxZoom || 22;
@@ -208,7 +140,8 @@ var Transform = function () {
 
       this.unmodified = false;
       this.angle = b;
-      this.calcMatrices();
+      this.calcMatrices(); // 2x2 matrix for rotating points
+
       this.rotationMatrix = mat2.create();
       mat2.rotate(this.rotationMatrix, this.rotationMatrix, this.angle);
     }
@@ -289,10 +222,20 @@ var Transform = function () {
         return;
       }
 
-      this.unmodified = false;
+      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.
+     *
+     * @readonly
+     * @type {Point}
+     * @memberof Transform
+     */
+
   }, {
     key: "centerPoint",
     get: function get() {
@@ -321,11 +264,27 @@ var Transform = function () {
       clone.calcMatrices();
       return clone;
     }
+    /**
+     * Returns if the padding params match
+     *
+     * @param {IPaddingOptions} padding
+     * @returns {boolean}
+     * @memberof Transform
+     */
+
   }, {
     key: "isPaddingEqual",
     value: function isPaddingEqual(padding) {
       return this.edgeInsets.equals(padding);
     }
+    /**
+     * Helper method to upadte edge-insets inplace
+     *
+     * @param {IPaddingOptions} target
+     * @param {number} t
+     * @memberof Transform
+     */
+
   }, {
     key: "interpolatePadding",
     value: function interpolatePadding(start, target, t) {
@@ -334,12 +293,183 @@ var Transform = function () {
       this.constrain();
       this.calcMatrices();
     }
+    /**
+     * Return a zoom level that will cover all tiles the transform
+     * @param {Object} options options
+     * @param {number} options.tileSize Tile size, expressed in screen pixels.
+     * @param {boolean} options.roundZoom Target zoom level. If true, the value will be rounded to the closest integer. Otherwise the value will be floored.
+     * @returns {number} zoom level An integer zoom level at which all tiles will be visible.
+     */
+
   }, {
     key: "coveringZoomLevel",
     value: function coveringZoomLevel(options) {
-      var z = (options.roundZoom ? Math.round : Math.floor)(this.zoom + this.scaleZoom(this.tileSize / options.tileSize));
+      var 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);
     }
+    /**
+     * Return any "wrapped" copies of a given tile coordinate that are visible
+     * in the current view.
+     *
+     * @private
+     */
+    // public getVisibleUnwrappedCoordinates(tileID: CanonicalTileID) {
+    //   const result = [new UnwrappedTileID(0, tileID)];
+    //   if (this._renderWorldCopies) {
+    //     const utl = this.pointCoordinate(new Point(0, 0));
+    //     const utr = this.pointCoordinate(new Point(this.width, 0));
+    //     const ubl = this.pointCoordinate(new Point(this.width, this.height));
+    //     const ubr = this.pointCoordinate(new Point(0, this.height));
+    //     const w0 = Math.floor(Math.min(utl.x, utr.x, ubl.x, ubr.x));
+    //     const w1 = Math.floor(Math.max(utl.x, utr.x, ubl.x, ubr.x));
+    //     // Add an extra copy of the world on each side to properly render ImageSources and CanvasSources.
+    //     // Both sources draw outside the tile boundaries of the tile that "contains them" so we need
+    //     // to add extra copies on both sides in case offscreen tiles need to draw into on-screen ones.
+    //     const extraWorldCopy = 1;
+    //     for (let w = w0 - extraWorldCopy; w <= w1 + extraWorldCopy; w++) {
+    //       if (w === 0) {
+    //         continue;
+    //       }
+    //       result.push(new UnwrappedTileID(w, tileID));
+    //     }
+    //   }
+    //   return result;
+    // }
+
+    /**
+     * Return all coordinates that could cover this transform for a covering
+     * zoom level.
+     * @param {Object} options
+     * @param {number} options.tileSize
+     * @param {number} options.minzoom
+     * @param {number} options.maxzoom
+     * @param {boolean} options.roundZoom
+     * @param {boolean} options.reparseOverscaled
+     * @param {boolean} options.renderWorldCopies
+     * @returns {Array<OverscaledTileID>} OverscaledTileIDs
+     * @private
+     */
+    // public coveringTiles(options: {
+    //   tileSize: number;
+    //   minzoom?: number;
+    //   maxzoom?: number;
+    //   roundZoom?: boolean;
+    //   reparseOverscaled?: boolean;
+    //   renderWorldCopies?: boolean;
+    // }): OverscaledTileID[] {
+    //   let z = this.coveringZoomLevel(options);
+    //   const actualZ = z;
+    //   if (options.minzoom !== undefined && z < options.minzoom) {
+    //     return [];
+    //   }
+    //   if (options.maxzoom !== undefined && z > options.maxzoom) {
+    //     z = options.maxzoom;
+    //   }
+    //   const centerCoord = MercatorCoordinate.fromLngLat(this.center);
+    //   const numTiles = Math.pow(2, z);
+    //   const centerPoint = [numTiles * centerCoord.x, numTiles * centerCoord.y, 0];
+    //   const cameraFrustum = Frustum.fromInvProjectionMatrix(
+    //     this.invProjMatrix,
+    //     this.worldSize,
+    //     z,
+    //   );
+    //   // No change of LOD behavior for pitch lower than 60 and when there is no top padding: return only tile ids from the requested zoom level
+    //   let minZoom = options.minzoom || 0;
+    //   // Use 0.1 as an epsilon to avoid for explicit == 0.0 floating point checks
+    //   if (this._pitch <= 60.0 && this.edgeInsets.top < 0.1) {
+    //     minZoom = z;
+    //   }
+    //   // There should always be a certain number of maximum zoom level tiles surrounding the center location
+    //   const radiusOfMaxLvlLodInTiles = 3;
+    //   const newRootTile = (wrap: number): any => {
+    //     return {
+    //       // All tiles are on zero elevation plane => z difference is zero
+    //       aabb: new Aabb(
+    //         [wrap * numTiles, 0, 0],
+    //         [(wrap + 1) * numTiles, numTiles, 0],
+    //       ),
+    //       zoom: 0,
+    //       x: 0,
+    //       y: 0,
+    //       wrap,
+    //       fullyVisible: false,
+    //     };
+    //   };
+    //   // Do a depth-first traversal to find visible tiles and proper levels of detail
+    //   const stack = [];
+    //   const result = [];
+    //   const maxZoom = z;
+    //   const overscaledZ = options.reparseOverscaled ? actualZ : z;
+    //   if (this._renderWorldCopies) {
+    //     // Render copy of the globe thrice on both sides
+    //     for (let i = 1; i <= 3; i++) {
+    //       stack.push(newRootTile(-i));
+    //       stack.push(newRootTile(i));
+    //     }
+    //   }
+    //   stack.push(newRootTile(0));
+    //   while (stack.length > 0) {
+    //     const it = stack.pop();
+    //     const x = it.x;
+    //     const y = it.y;
+    //     let fullyVisible = it.fullyVisible;
+    //     // Visibility of a tile is not required if any of its ancestor if fully inside the frustum
+    //     if (!fullyVisible) {
+    //       const intersectResult = it.aabb.intersects(cameraFrustum);
+    //       if (intersectResult === 0) {
+    //         continue;
+    //       }
+    //       fullyVisible = intersectResult === 2;
+    //     }
+    //     const distanceX = it.aabb.distanceX(centerPoint);
+    //     const distanceY = it.aabb.distanceY(centerPoint);
+    //     const longestDim = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+    //     // We're using distance based heuristics to determine if a tile should be split into quadrants or not.
+    //     // radiusOfMaxLvlLodInTiles defines that there's always a certain number of maxLevel tiles next to the map center.
+    //     // Using the fact that a parent node in quadtree is twice the size of its children (per dimension)
+    //     // we can define distance thresholds for each relative level:
+    //     // f(k) = offset + 2 + 4 + 8 + 16 + ... + 2^k. This is the same as "offset+2^(k+1)-2"
+    //     const distToSplit =
+    //       radiusOfMaxLvlLodInTiles + (1 << (maxZoom - it.zoom)) - 2;
+    //     // Have we reached the target depth or is the tile too far away to be any split further?
+    //     if (
+    //       it.zoom === maxZoom ||
+    //       (longestDim > distToSplit && it.zoom >= minZoom)
+    //     ) {
+    //       result.push({
+    //         tileID: new OverscaledTileID(
+    //           it.zoom === maxZoom ? overscaledZ : it.zoom,
+    //           it.wrap,
+    //           it.zoom,
+    //           x,
+    //           y,
+    //         ),
+    //         distanceSq: vec2.sqrLen([
+    //           centerPoint[0] - 0.5 - x,
+    //           centerPoint[1] - 0.5 - y,
+    //         ]),
+    //       });
+    //       continue;
+    //     }
+    //     for (let i = 0; i < 4; i++) {
+    //       const childX = (x << 1) + (i % 2);
+    //       const childY = (y << 1) + (i >> 1);
+    //       stack.push({
+    //         aabb: it.aabb.quadrant(i),
+    //         zoom: it.zoom + 1,
+    //         x: childX,
+    //         y: childY,
+    //         wrap: it.wrap,
+    //         fullyVisible,
+    //       });
+    //     }
+    //   }
+    //   return result
+    //     .sort((a, b) => a.distanceSq - b.distanceSq)
+    //     .map((a) => a.tileID);
+    // }
+
   }, {
     key: "resize",
     value: function resize(width, height) {
@@ -386,10 +516,15 @@ var Transform = function () {
   }, {
     key: "pointCoordinate",
     value: function pointCoordinate(p) {
-      var targetZ = 0;
+      var 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
+
       var coord0 = new Float64Array([p.x, p.y, 0, 1]);
-      var coord1 = new Float64Array([p.x, p.y, 1, 1]);
-      vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse);
+      var coord1 = new Float64Array([p.x, p.y, 1, 1]); // @ts-ignore
+
+      vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse); // @ts-ignore
+
       vec4.transformMat4(coord1, coord1, this.pixelMatrixInverse);
       var w0 = coord0[3];
       var w1 = coord1[3];
@@ -402,11 +537,22 @@ var Transform = function () {
       var t = z0 === z1 ? 0 : (targetZ - z0) / (z1 - z0);
       return new MercatorCoordinate(interpolate(x0, x1, t) / this.worldSize, interpolate(y0, y1, t) / this.worldSize);
     }
+    /**
+     * 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 {LngLatBounds} Returns a {@link LngLatBounds} object describing the map's geographical bounds.
+     */
+
   }, {
     key: "getBounds",
     value: function getBounds() {
       return new LngLatBounds().extend(this.pointLocation(new Point(0, 0))).extend(this.pointLocation(new Point(this.width, 0))).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 {LngLatBounds} {@link LngLatBounds}
+     */
+
   }, {
     key: "getMaxBounds",
     value: function getMaxBounds() {
@@ -416,6 +562,11 @@ var Transform = function () {
 
       return new LngLatBounds([this.lngRange[0], this.latRange[0]], [this.lngRange[1], this.latRange[1]]);
     }
+    /**
+     * Sets or clears the map's geographical constraints.
+     * @param {LngLatBounds} bounds A {@link LngLatBounds} object describing the new geographic boundaries of the map.
+     */
+
   }, {
     key: "setMaxBounds",
     value: function setMaxBounds(bounds) {
@@ -436,6 +587,7 @@ var Transform = function () {
   }, {
     key: "maxPitchScaleFactor",
     value: function maxPitchScaleFactor() {
+      // calcMatrices hasn't run yet
       if (!this.pixelMatrixInverse) {
         return 1;
       }
@@ -445,6 +597,18 @@ var Transform = function () {
       var 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.
+     */
+
   }, {
     key: "getCameraPoint",
     value: function getCameraPoint() {
@@ -452,6 +616,17 @@ var Transform = function () {
       var 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.
+     *
+     * This 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.
+     *  - 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"
+     */
+
   }, {
     key: "getCameraQueryGeometry",
     value: function getCameraQueryGeometry(queryGeometry) {
@@ -485,6 +660,13 @@ var Transform = function () {
         return [new Point(minX, minY), new Point(maxX, minY), new Point(maxX, maxY), new Point(minX, maxY), new Point(minX, minY)];
       }
     }
+    /**
+     * Given a coordinate, return the screen point that corresponds to it
+     * @param {Coordinate} coord
+     * @returns {Point} screen point
+     * @private
+     */
+
   }, {
     key: "coordinatePoint",
     value: function coordinatePoint(coord) {
@@ -492,21 +674,53 @@ var Transform = function () {
       vec4.transformMat4(p, p, this.pixelMatrix);
       return new Point(p[0] / p[3], p[1] / p[3]);
     }
+    /**
+     * Given a location, return the screen point that corresponds to it
+     * @param {LngLat} lnglat location
+     * @returns {Point} screen point
+     * @private
+     */
+
   }, {
     key: "locationPoint",
     value: function locationPoint(lnglat) {
       return this.coordinatePoint(this.locationCoordinate(lnglat));
     }
+    /**
+     * Given a point on screen, return its lnglat
+     * @param {Point} p screen point
+     * @returns {LngLat} lnglat location
+     * @private
+     */
+
   }, {
     key: "pointLocation",
     value: function pointLocation(p) {
+      // if(p.x !== 0 && p.x !== 1001) {
+      //   console.log(p.x)
+      // }
       return this.coordinateLocation(this.pointCoordinate(p));
     }
+    /**
+     * Given a geographical lnglat, return an unrounded
+     * coordinate that represents it at this transform's zoom level.
+     * @param {LngLat} lnglat
+     * @returns {Coordinate}
+     * @private
+     */
+
   }, {
     key: "locationCoordinate",
     value: function locationCoordinate(lnglat) {
       return MercatorCoordinate.fromLngLat(lnglat);
     }
+    /**
+     * Given a Coordinate, return its geographical position.
+     * @param {Coordinate} coord
+     * @returns {LngLat} lnglat
+     * @private
+     */
+
   }, {
     key: "coordinateLocation",
     value: function coordinateLocation(coord) {
@@ -517,6 +731,40 @@ var Transform = function () {
     value: function getProjectionMatrix() {
       return this.projMatrix;
     }
+    /**
+     * Calculate the posMatrix that, given a tile coordinate, would be used to display the tile on a map.
+     * @param {UnwrappedTileID} unwrappedTileID;
+     * @private
+     */
+    // private calculatePosMatrix(
+    //   unwrappedTileID: UnwrappedTileID,
+    //   aligned: boolean = false,
+    // ): Float32Array {
+    //   const posMatrixKey = unwrappedTileID.key;
+    //   const cache = aligned ? this.alignedPosMatrixCache : this.posMatrixCache;
+    //   if (cache[posMatrixKey]) {
+    //     return cache[posMatrixKey];
+    //   }
+    //   const canonical = unwrappedTileID.canonical;
+    //   const scale = this.worldSize / this.zoomScale(canonical.z);
+    //   const unwrappedX =
+    //     canonical.x + Math.pow(2, canonical.z) * unwrappedTileID.wrap;
+    //   const posMatrix = mat4.identity(new Float64Array(16));
+    //   mat4.translate(posMatrix, posMatrix, [
+    //     unwrappedX * scale,
+    //     canonical.y * scale,
+    //     0,
+    //   ]);
+    //   mat4.scale(posMatrix, posMatrix, [scale / EXTENT, scale / EXTENT, 1]);
+    //   mat4.multiply(
+    //     posMatrix,
+    //     aligned ? this.alignedProjMatrix : this.projMatrix,
+    //     posMatrix,
+    //   );
+    //   cache[posMatrixKey] = new Float32Array(posMatrix);
+    //   return cache[posMatrixKey];
+    // }
+
   }, {
     key: "constrain",
     value: function constrain() {
@@ -550,7 +798,8 @@ var Transform = function () {
         sx = maxX - minX < size.x ? size.x / (maxX - minX) : 0;
       }
 
-      var point = this.point;
+      var point = this.point; // how much the map should scale to fit the screen into given latitude/longitude ranges
+
       var s = Math.max(sx || 0, sy || 0);
 
       if (s) {
@@ -591,7 +840,8 @@ var Transform = function () {
         if (x + w2 > maxX) {
           x2 = maxX - w2;
         }
-      }
+      } // pan the map if the screen goes off the range
+
 
       if (x2 !== undefined || y2 !== undefined) {
         this.center = this.unproject(new Point(x2 !== undefined ? x2 : point.x, y2 !== undefined ? y2 : point.y));
@@ -609,53 +859,105 @@ var Transform = function () {
 
       var halfFov = this._fov / 2;
       var offset = this.centerOffset;
-      this.cameraToCenterDistance = 0.5 / Math.tan(halfFov) * this.height;
+      this.cameraToCenterDistance = 0.5 / Math.tan(halfFov) * this.height; // 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])
+
       var groundAngle = Math.PI / 2 + this._pitch;
       var fovAboveCenter = this._fov * (0.5 + offset.y / this.height);
       var topHalfSurfaceDistance = Math.sin(fovAboveCenter) * this.cameraToCenterDistance / Math.sin(clamp(Math.PI - groundAngle - fovAboveCenter, 0.01, Math.PI - 0.01));
       var point = this.point;
       var x = point.x;
-      var y = point.y;
-      var furthestDistance = Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistance + this.cameraToCenterDistance;
-      var farZ = furthestDistance * 1.01;
-      var nearZ = this.height / 50;
-      var m = new Float64Array(16);
-      mat4.perspective(m, this._fov, this.width / this.height, nearZ, farZ);
+      var y = point.y; // Calculate z distance of the farthest fragment that should be rendered.
+
+      var furthestDistance = Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistance + this.cameraToCenterDistance; // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
+
+      var farZ = furthestDistance * 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)
+      //
+      // Smaller values worked well for mapbox-gl-js but deckgl was encountering precision issues
+      // when rendering it's layers using 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.
+
+      var nearZ = this.height / 50; // matrix for conversion from location to GL coordinates (-1 .. 1)
+      // TODO: 使用 Float64Array 的原因是为了避免计算精度问题、 mat4.create() 默认使用 Float32Array
+
+      var m = new Float64Array(16); // @ts-ignore
+
+      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]);
-      this.mercatorMatrix = mat4.scale([], m, [this.worldSize, this.worldSize, this.worldSize]);
-      mat4.scale(m, m, [1, 1, mercatorZfromAltitude(1, this.center.lat) * this.worldSize, 1]);
-      this.projMatrix = m;
-      this.invProjMatrix = mat4.invert([], this.projMatrix);
+      m[9] = offset.y * 2 / this.height; // @ts-ignore
+
+      mat4.scale(m, m, [1, -1, 1]); // @ts-ignore
+
+      mat4.translate(m, m, [0, 0, -this.cameraToCenterDistance]); // @ts-ignore
+
+      mat4.rotateX(m, m, this._pitch); // @ts-ignore
+
+      mat4.rotateZ(m, m, this.angle); // @ts-ignore
+
+      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 GL coordinates.
+      // @ts-ignore
+
+      this.mercatorMatrix = mat4.scale([], m, [this.worldSize, this.worldSize, this.worldSize]); // scale vertically to meters per pixel (inverse of ground resolution):
+      // @ts-ignore
+
+      mat4.scale(m, m, [1, 1, mercatorZfromAltitude(1, this.center.lat) * this.worldSize, 1]); // @ts-ignore
+
+      this.projMatrix = m; // @ts-ignore
+
+      this.invProjMatrix = mat4.invert([], this.projMatrix); // 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.
+
       var xShift = this.width % 2 / 2;
       var yShift = this.height % 2 / 2;
       var angleCos = Math.cos(this.angle);
       var angleSin = Math.sin(this.angle);
       var dx = x - Math.round(x) + angleCos * xShift + angleSin * yShift;
-      var dy = y - Math.round(y) + angleCos * yShift + angleSin * xShift;
-      var alignedM = new Float64Array(m);
-      mat4.translate(alignedM, alignedM, [dx > 0.5 ? dx - 1 : dx, dy > 0.5 ? dy - 1 : dy, 0]);
-      this.alignedProjMatrix = alignedM;
-      m = mat4.create();
-      mat4.scale(m, m, [this.width / 2, -this.height / 2, 1]);
-      mat4.translate(m, m, [1, -1, 0]);
-      this.labelPlaneMatrix = m;
-      m = mat4.create();
-      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;
-      this.pixelMatrix = mat4.multiply(new Float64Array(16), this.labelPlaneMatrix, this.projMatrix);
+      var dy = y - Math.round(y) + angleCos * yShift + angleSin * xShift; // const alignedM = mat4.clone(m);
+
+      var alignedM = new Float64Array(m); // @ts-ignore
+
+      mat4.translate(alignedM, alignedM, [dx > 0.5 ? dx - 1 : dx, dy > 0.5 ? dy - 1 : dy, 0]); // @ts-ignore
+
+      this.alignedProjMatrix = alignedM; // @ts-ignore
+
+      m = mat4.create(); // @ts-ignore
+
+      mat4.scale(m, m, [this.width / 2, -this.height / 2, 1]); // @ts-ignore
+
+      mat4.translate(m, m, [1, -1, 0]); // @ts-ignore
+
+      this.labelPlaneMatrix = m; // @ts-ignore
+
+      m = mat4.create(); // @ts-ignore
+
+      mat4.scale(m, m, [1, -1, 1]); // @ts-ignore
+
+      mat4.translate(m, m, [-1, -1, 0]); // @ts-ignore
+
+      mat4.scale(m, m, [2 / this.width, 2 / this.height, 1]); // @ts-ignore
+
+      this.glCoordMatrix = m; // matrix for conversion from location to screen coordinates
+
+      this.pixelMatrix = mat4.multiply( // @ts-ignore
+      new Float64Array(16), this.labelPlaneMatrix, this.projMatrix); // inverse matrix for conversion from screen coordinaes to location
+      // @ts-ignore
+
       m = mat4.invert(new Float64Array(16), this.pixelMatrix);
 
       if (!m) {
         throw new Error('failed to invert matrix');
-      }
+      } // @ts-ignore
+
 
       this.pixelMatrixInverse = m;
       this.posMatrixCache = {};
@@ -666,5 +968,4 @@ var Transform = function () {
   return Transform;
 }();
 
-export { Transform as default };
-//# sourceMappingURL=transform.js.map
+export { Transform as default };