@antv/l7-map 2.17.2 → 2.17.4

package/es/geo/transform.js

@@ -1,8 +1,12 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+
 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; } } }; }
+
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-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; }
+
+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';
@@ -13,10 +17,13 @@ import LngLat from "./lng_lat";
 import LngLatBounds from "./lng_lat_bounds";
 import MercatorCoordinate, { mercatorXfromLng, mercatorYfromLat, mercatorZfromAltitude } from "./mercator";
 export var EXTENT = 8192;
+
 var Transform = /*#__PURE__*/function () {
   function Transform(minZoom, maxZoom, minPitch, maxPitch, renderWorldCopies) {
     _classCallCheck(this, Transform);
+
     this.tileSize = 512; // constant
+
     this.maxValidLatitude = 85.051129; // constant
 
     this._renderWorldCopies = renderWorldCopies === undefined ? true : renderWorldCopies;
@@ -37,6 +44,7 @@ var Transform = /*#__PURE__*/function () {
     this.posMatrixCache = {};
     this.alignedPosMatrixCache = {};
   }
+
   _createClass(Transform, [{
     key: "minZoom",
     get: function get() {
@@ -46,6 +54,7 @@ var Transform = /*#__PURE__*/function () {
       if (this._minZoom === zoom) {
         return;
       }
+
       this._minZoom = zoom;
       this.zoom = Math.max(this.zoom, zoom);
     }
@@ -58,6 +67,7 @@ var Transform = /*#__PURE__*/function () {
       if (this._maxZoom === zoom) {
         return;
       }
+
       this._maxZoom = zoom;
       this.zoom = Math.min(this.zoom, zoom);
     }
@@ -70,6 +80,7 @@ var Transform = /*#__PURE__*/function () {
       if (this._minPitch === pitch) {
         return;
       }
+
       this._minPitch = pitch;
       this._pitch = Math.max(this._pitch, pitch);
     }
@@ -82,6 +93,7 @@ var Transform = /*#__PURE__*/function () {
       if (this._maxPitch === pitch) {
         return;
       }
+
       this._maxPitch = pitch;
       this._pitch = Math.min(this._pitch, pitch);
     }
@@ -96,6 +108,7 @@ var Transform = /*#__PURE__*/function () {
       } else if (renderWorldCopies === null) {
         renderWorldCopies = false;
       }
+
       this._renderWorldCopies = renderWorldCopies;
     }
   }, {
@@ -120,14 +133,15 @@ var Transform = /*#__PURE__*/function () {
     },
     set: function set(bearing) {
       var b = -wrap(bearing, -180, 180) * Math.PI / 180;
+
       if (this.angle === b) {
         return;
       }
+
       this.unmodified = false;
       this.angle = b;
-      this.calcMatrices();
+      this.calcMatrices(); // 2x2 matrix for rotating points
 
-      // 2x2 matrix for rotating points
       this.rotationMatrix = mat2.create();
       mat2.rotate(this.rotationMatrix, this.rotationMatrix, this.angle);
     }
@@ -138,9 +152,11 @@ var Transform = /*#__PURE__*/function () {
     },
     set: function set(pitch) {
       var p = clamp(pitch, this._minPitch, this._maxPitch) / 180 * Math.PI;
+
       if (this._pitch === p) {
         return;
       }
+
       this.unmodified = false;
       this._pitch = p;
       this.calcMatrices();
@@ -152,9 +168,11 @@ var Transform = /*#__PURE__*/function () {
     },
     set: function set(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();
@@ -166,9 +184,11 @@ var Transform = /*#__PURE__*/function () {
     },
     set: function set(zoom) {
       var z = Math.min(Math.max(zoom, this._minZoom), this._maxZoom);
+
       if (this._zoom === z) {
         return;
       }
+
       this.unmodified = false;
       this._zoom = z;
       this.scale = this.zoomScale(z);
@@ -186,6 +206,7 @@ var Transform = /*#__PURE__*/function () {
       if (center.lat === this._center.lat && center.lng === this._center.lng) {
         return;
       }
+
       this.unmodified = false;
       this._center = center;
       this.constrain();
@@ -200,12 +221,12 @@ var Transform = /*#__PURE__*/function () {
       if (this.edgeInsets.equals(padding)) {
         return;
       }
-      this.unmodified = false;
-      // Update edge-insets inplace
+
+      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.
@@ -214,6 +235,7 @@ var Transform = /*#__PURE__*/function () {
      * @type {Point}
      * @memberof Transform
      */
+
   }, {
     key: "centerPoint",
     get: function get() {
@@ -242,7 +264,6 @@ var Transform = /*#__PURE__*/function () {
       clone.calcMatrices();
       return clone;
     }
-
     /**
      * Returns if the padding params match
      *
@@ -250,12 +271,12 @@ var Transform = /*#__PURE__*/function () {
      * @returns {boolean}
      * @memberof Transform
      */
+
   }, {
     key: "isPaddingEqual",
     value: function isPaddingEqual(padding) {
       return this.edgeInsets.equals(padding);
     }
-
     /**
      * Helper method to upadte edge-insets inplace
      *
@@ -263,6 +284,7 @@ var Transform = /*#__PURE__*/function () {
      * @param {number} t
      * @memberof Transform
      */
+
   }, {
     key: "interpolatePadding",
     value: function interpolatePadding(start, target, t) {
@@ -271,7 +293,6 @@ var Transform = /*#__PURE__*/function () {
       this.constrain();
       this.calcMatrices();
     }
-
     /**
      * Return a zoom level that will cover all tiles the transform
      * @param {Object} options options
@@ -279,14 +300,14 @@ var Transform = /*#__PURE__*/function () {
      * @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));
-      // At negative zoom levels load tiles from z0 because negative tile zoom levels don't exist.
+      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.
@@ -302,12 +323,10 @@ var Transform = /*#__PURE__*/function () {
     //     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;
@@ -341,14 +360,12 @@ var Transform = /*#__PURE__*/function () {
     // }): 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];
@@ -357,17 +374,14 @@ var Transform = /*#__PURE__*/function () {
     //     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
@@ -382,13 +396,11 @@ var Transform = /*#__PURE__*/function () {
     //       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++) {
@@ -396,30 +408,23 @@ var Transform = /*#__PURE__*/function () {
     //       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)
@@ -427,7 +432,6 @@ var Transform = /*#__PURE__*/function () {
     //     // 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 ||
@@ -448,11 +452,9 @@ var Transform = /*#__PURE__*/function () {
     //       });
     //       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,
@@ -463,11 +465,11 @@ var Transform = /*#__PURE__*/function () {
     //       });
     //     }
     //   }
-
     //   return result
     //     .sort((a, b) => a.distanceSq - b.distanceSq)
     //     .map((a) => a.tileID);
     // }
+
   }, {
     key: "resize",
     value: function resize(width, height) {
@@ -506,6 +508,7 @@ var Transform = /*#__PURE__*/function () {
       var loc = this.locationCoordinate(lnglat);
       var 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();
       }
@@ -513,17 +516,15 @@ var Transform = /*#__PURE__*/function () {
   }, {
     key: "pointCoordinate",
     value: function pointCoordinate(p) {
-      var targetZ = 0;
-      // since we don't know the correct projected z value for the point,
+      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]);
+      var coord1 = new Float64Array([p.x, p.y, 1, 1]); // @ts-ignore
+
+      vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse); // @ts-ignore
 
-      // @ts-ignore
-      vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse);
-      // @ts-ignore
       vec4.transformMat4(coord1, coord1, this.pixelMatrixInverse);
       var w0 = coord0[3];
       var w1 = coord1[3];
@@ -536,35 +537,36 @@ var Transform = /*#__PURE__*/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() {
       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]]);
     }
-
     /**
      * 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) {
@@ -589,12 +591,12 @@ var Transform = /*#__PURE__*/function () {
       if (!this.pixelMatrixInverse) {
         return 1;
       }
+
       var coord = this.pointCoordinate(new Point(0, 0));
       var p = new Float32Array([coord.x * this.worldSize, coord.y * this.worldSize, 0, 1]);
       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).
@@ -606,6 +608,7 @@ var Transform = /*#__PURE__*/function () {
      * 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() {
@@ -613,7 +616,6 @@ var Transform = /*#__PURE__*/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
@@ -624,10 +626,12 @@ var Transform = /*#__PURE__*/function () {
      *  - 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) {
       var c = this.getCameraPoint();
+
       if (queryGeometry.length === 1) {
         return [queryGeometry[0], c];
       } else {
@@ -635,8 +639,10 @@ var Transform = /*#__PURE__*/function () {
         var minY = c.y;
         var maxX = c.x;
         var maxY = c.y;
+
         var _iterator = _createForOfIteratorHelper(queryGeometry),
-          _step;
+            _step;
+
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var p = _step.value;
@@ -650,16 +656,17 @@ var Transform = /*#__PURE__*/function () {
         } finally {
           _iterator.f();
         }
+
         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) {
@@ -673,28 +680,27 @@ var Transform = /*#__PURE__*/function () {
      * @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.
@@ -702,18 +708,19 @@ var Transform = /*#__PURE__*/function () {
      * @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) {
@@ -738,12 +745,10 @@ var Transform = /*#__PURE__*/function () {
     //   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,
@@ -756,16 +761,17 @@ var Transform = /*#__PURE__*/function () {
     //     aligned ? this.alignedProjMatrix : this.projMatrix,
     //     posMatrix,
     //   );
-
     //   cache[posMatrixKey] = new Float32Array(posMatrix);
     //   return cache[posMatrixKey];
     // }
+
   }, {
     key: "constrain",
     value: function constrain() {
       if (!this.center || !this.width || !this.height || this.constraining) {
         return;
       }
+
       this.constraining = true;
       var minY = -90;
       var maxY = 90;
@@ -777,58 +783,70 @@ var Transform = /*#__PURE__*/function () {
       var y2;
       var size = this.size;
       var unmodified = this.unmodified;
+
       if (this.latRange) {
         var latRange = this.latRange;
         minY = mercatorYfromLat(latRange[1]) * this.worldSize;
         maxY = mercatorYfromLat(latRange[0]) * this.worldSize;
         sy = maxY - minY < size.y ? size.y / (maxY - minY) : 0;
       }
+
       if (this.lngRange) {
         var lngRange = this.lngRange;
         minX = mercatorXfromLng(lngRange[0]) * this.worldSize;
         maxX = mercatorXfromLng(lngRange[1]) * this.worldSize;
         sx = maxX - minX < size.x ? size.x / (maxX - minX) : 0;
       }
-      var point = this.point;
 
-      // how much the map should scale to fit the screen into given latitude/longitude ranges
+      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) {
         this.center = this.unproject(new Point(sx ? (maxX + minX) / 2 : point.x, sy ? (maxY + minY) / 2 : point.y));
+
         if (isMini) {
           this.zoom = Math.max(this.zoom, Math.max(-1, this.minZoom));
         } else {
           this.zoom += this.scaleZoom(s);
         }
+
         this.unmodified = unmodified;
         this.constraining = false;
         return;
       }
+
       if (this.latRange) {
         var y = point.y;
         var h2 = size.y / 2;
+
         if (y - h2 < minY) {
           y2 = minY + h2;
         }
+
         if (y + h2 > maxY) {
           y2 = maxY - h2;
         }
       }
+
       if (this.lngRange) {
         var x = point.x;
         var w2 = size.x / 2;
+
         if (x - w2 < minX) {
           x2 = minX + w2;
         }
+
         if (x + w2 > maxX) {
           x2 = maxX - w2;
         }
-      }
+      } // pan the map if the screen goes off the range
+
 
-      // 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));
       }
+
       this.unmodified = unmodified;
       this.constraining = false;
     }
@@ -838,125 +856,116 @@ var Transform = /*#__PURE__*/function () {
       if (!this.height) {
         return;
       }
+
       var halfFov = this._fov / 2;
       var offset = this.centerOffset;
-      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
+      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 y = point.y; // Calculate z distance of the farthest fragment that should be rendered.
 
-      // 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;
+      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`
 
-      // The larger the value of nearZ is
+      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)
+      var nearZ = this.height / 50; // matrix for conversion from location to GL coordinates (-1 .. 1)
       // 使用 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
+      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;
+      m[9] = offset.y * 2 / this.height; // @ts-ignore
 
-      // @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]);
+      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
 
-      // The mercatorMatrix can be used to transform points from mercator coordinates
+      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):
 
+      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.
+      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;
-      // 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;
+      var dy = y - Math.round(y) + angleCos * yShift + angleSin * xShift; // const alignedM = mat4.clone(m);
 
-      // @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;
+      var alignedM = new Float64Array(m); // @ts-ignore
 
-      // @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;
+      mat4.translate(alignedM, alignedM, [dx > 0.5 ? dx - 1 : dx, dy > 0.5 ? dy - 1 : dy, 0]); // @ts-ignore
 
-      // matrix for conversion from location to screen coordinates
-      this.pixelMatrix = mat4.multiply(
-      // @ts-ignore
-      new Float64Array(16), this.labelPlaneMatrix, this.projMatrix);
+      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
 
-      // inverse matrix for conversion from screen coordinaes to location
+      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
+      } // @ts-ignore
+
+
       this.pixelMatrixInverse = m;
       this.posMatrixCache = {};
       this.alignedPosMatrixCache = {};
     }
   }]);
+
   return Transform;
 }();
+
 export { Transform as default };