Merge 4bedbff into 08e442f

docs/api-reference/viewport.md

@@ -137,6 +137,17 @@ Returns:
 * `[longitude, latitude, altitude]`
 
 
+##### `getBounds`
+
+Extracts the axis-aligned bounding box of the current visible area.
+
+* `options` (Object, optional)
+  + `options.z` (Number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding box at a specific elevation. Default `0`.
+
+Returns:
+* `[minX, minY, maxX, maxY]` that defines the smallest orthogonal bounds that encompasses the visible region.
+
+
 ##### `getFrustumPlanes`
 
 Extract view frustum planes of the current camera. Each plane is defined by its normal `normal` and distance from

examples/website/map-tile/app.js

@@ -2,6 +2,7 @@ import React, {PureComponent} from 'react';
 import {render} from 'react-dom';
 
 import DeckGL from '@deck.gl/react';
+import {MapView} from '@deck.gl/core';
 import {TileLayer} from '@deck.gl/geo-layers';
 import {BitmapLayer} from '@deck.gl/layers';
 
@@ -71,7 +72,12 @@ export default class App extends PureComponent {
 
   render() {
     return (
-      <DeckGL layers={this._renderLayers()} initialViewState={INITIAL_VIEW_STATE} controller={true}>
+      <DeckGL
+        layers={this._renderLayers()}
+        views={new MapView({repeat: true})}
+        initialViewState={INITIAL_VIEW_STATE}
+        controller={true}
+      >
         {this._renderTooltip}
       </DeckGL>
     );

modules/aggregation-layers/package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@luma.gl/shadertools": "^8.1.2",
-    "@math.gl/web-mercator": "^3.1.3",
+    "@math.gl/web-mercator": "^3.2.0-alpha.3",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {

modules/core/package.json

@@ -35,9 +35,9 @@
     "@loaders.gl/core": "^2.1.5",
     "@loaders.gl/images": "^2.1.5",
     "@luma.gl/core": "^8.1.2",
-    "@math.gl/web-mercator": "^3.1.3",
+    "@math.gl/web-mercator": "^3.2.0-alpha.3",
     "gl-matrix": "^3.0.0",
-    "math.gl": "^3.1.2",
+    "math.gl": "^3.2.0-alpha.3",
     "mjolnir.js": "^2.3.0",
     "probe.gl": "^3.2.1"
   }

modules/core/src/viewports/viewport.js

@@ -210,6 +210,22 @@ export default class Viewport {
     return xyz;
   }
 
+  getBounds(options = {}) {
+    const unprojectOption = {targetZ: options.z || 0};
+
+    const topLeft = this.unproject([0, 0], unprojectOption);
+    const topRight = this.unproject([this.width, 0], unprojectOption);
+    const bottomLeft = this.unproject([0, this.height], unprojectOption);
+    const bottomRight = this.unproject([this.width, this.height], unprojectOption);
+
+    return [
+      Math.min(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+      Math.min(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]),
+      Math.max(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+      Math.max(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1])
+    ];
+  }
+
   getDistanceScales(coordinateOrigin = null) {
     if (coordinateOrigin) {
       return getDistanceScales({

modules/core/src/viewports/web-mercator-viewport.js

@@ -27,7 +27,8 @@ import {
   getViewMatrix,
   addMetersToLngLat,
   getProjectionParameters,
-  fitBounds
+  fitBounds,
+  getBounds
 } from '@math.gl/web-mercator';
 
 // TODO - import from math.gl
@@ -136,16 +137,10 @@ export default class WebMercatorViewport extends Viewport {
   get subViewports() {
     if (this._subViewports && !this._subViewports.length) {
       // Cache sub viewports so that we only calculate them once
-      const topLeft = this.unproject([0, 0]);
-      const topRight = this.unproject([this.width, 0]);
-      const bottomLeft = this.unproject([0, this.height]);
-      const bottomRight = this.unproject([this.width, this.height]);
+      const bounds = this.getBounds();
 
-      const minLon = Math.min(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]);
-      const maxLon = Math.max(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]);
-
-      const minOffset = Math.floor((minLon + 180) / 360);
-      const maxOffset = Math.ceil((maxLon - 180) / 360);
+      const minOffset = Math.floor((bounds[0] + 180) / 360);
+      const maxOffset = Math.ceil((bounds[2] - 180) / 360);
 
       for (let x = minOffset; x <= maxOffset; x++) {
         const offsetViewport = x
@@ -194,6 +189,17 @@ export default class WebMercatorViewport extends Viewport {
     return this.unprojectFlat(newCenter);
   }
 
+  getBounds(options = {}) {
+    const corners = getBounds(this, options.z || 0);
+
+    return [
+      Math.min(corners[0][0], corners[1][0], corners[2][0], corners[3][0]),
+      Math.min(corners[0][1], corners[1][1], corners[2][1], corners[3][1]),
+      Math.max(corners[0][0], corners[1][0], corners[2][0], corners[3][0]),
+      Math.max(corners[0][1], corners[1][1], corners[2][1], corners[3][1])
+    ];
+  }
+
   /**
    * Returns a new viewport that fit around the given rectangle.
    * Only supports non-perspective mode.

modules/geo-layers/package.json

@@ -35,11 +35,12 @@
     "@loaders.gl/mvt": "^2.1.5",
     "@loaders.gl/terrain": "^2.1.5",
     "@loaders.gl/tiles": "^2.1.5",
-    "@math.gl/core": "^3.1.3",
-    "@math.gl/web-mercator": "^3.1.3",
+    "@math.gl/core": "^3.2.0-alpha.3",
+    "@math.gl/culling": "^3.2.0-alpha.3",
+    "@math.gl/web-mercator": "^3.2.0-alpha.3",
     "h3-js": "^3.6.0",
     "long": "^3.2.0",
-    "math.gl": "^3.1.3"
+    "math.gl": "^3.2.0-alpha.3"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",

modules/geo-layers/src/tile-layer/utils.js

@@ -44,38 +44,25 @@ export function getURLFromTemplate(template, properties) {
  * gets the bounding box of a viewport
  */
 function getBoundingBox(viewport, zRange, extent) {
-  let corners;
+  let bounds;
   if (zRange && zRange.length === 2) {
     const [minZ, maxZ] = zRange;
-    const minTargetZ = {targetZ: minZ};
-    const maxTargetZ = {targetZ: maxZ};
-    corners = [
-      // Lower zRange
-      viewport.unproject([0, 0], minTargetZ),
-      viewport.unproject([viewport.width, 0], minTargetZ),
-      viewport.unproject([0, viewport.height], minTargetZ),
-      viewport.unproject([viewport.width, viewport.height], minTargetZ),
-
-      // Upper zRange
-      viewport.unproject([0, 0], maxTargetZ),
-      viewport.unproject([viewport.width, 0], maxTargetZ),
-      viewport.unproject([0, viewport.height], maxTargetZ),
-      viewport.unproject([viewport.width, viewport.height], maxTargetZ)
+    const bounds0 = viewport.getBounds({z: minZ});
+    const bounds1 = viewport.getBounds({z: maxZ});
+    bounds = [
+      Math.min(bounds0[0], bounds1[0]),
+      Math.min(bounds0[1], bounds1[1]),
+      Math.max(bounds0[2], bounds1[2]),
+      Math.max(bounds0[3], bounds1[3])
     ];
   } else {
-    corners = [
-      viewport.unproject([0, 0]),
-      viewport.unproject([viewport.width, 0]),
-      viewport.unproject([0, viewport.height]),
-      viewport.unproject([viewport.width, viewport.height])
-    ];
+    bounds = viewport.getBounds();
   }
-
   return [
-    Math.max(Math.min(...corners.map(arr => arr[0])), extent[0]),
-    Math.max(Math.min(...corners.map(arr => arr[1])), extent[1]),
-    Math.min(Math.max(...corners.map(arr => arr[0])), extent[2]),
-    Math.min(Math.max(...corners.map(arr => arr[1])), extent[3])
+    Math.max(bounds[0], extent[0]),
+    Math.max(bounds[1], extent[1]),
+    Math.min(bounds[2], extent[2]),
+    Math.min(bounds[3], extent[3])
   ];
 }
 

package.json

@@ -40,6 +40,9 @@
   "browser": {
     "jsdom": false
   },
+  "resolutions": {
+    "math.gl": "3.2.0-alpha.3"
+  },
   "devDependencies": {
     "@loaders.gl/csv": "^2.1.5",
     "@loaders.gl/polyfills": "^2.1.5",

yarn.lock

@@ -1836,6 +1836,14 @@
     "@babel/runtime" "^7.0.0"
     gl-matrix "^3.0.0"
 
+"@math.gl/core@3.2.0-alpha.3", "@math.gl/core@^3.2.0-alpha.3":
+  version "3.2.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/@math.gl/core/-/core-3.2.0-alpha.3.tgz#ea9b7b8f37c6186c05b77e9c2e34bd52e31c8f18"
+  integrity sha512-5rmBHggjMx7FwTBNmOSj3mo7Oxv0n+ZRR4Cg0Ikmg2Eb1wHFCOrejm15P0paOVyQuMiZ5KwWqPnNqxQoC46fUw==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    gl-matrix "^3.0.0"
+
 "@math.gl/culling@^3.1.2":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@math.gl/culling/-/culling-3.1.3.tgz#077d2aff2d6175f37ec61792aa6e8e6f8e6d41aa"
@@ -1845,6 +1853,15 @@
     "@math.gl/core" "3.1.3"
     gl-matrix "^3.0.0"
 
+"@math.gl/culling@^3.2.0-alpha.3":
+  version "3.2.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/@math.gl/culling/-/culling-3.2.0-alpha.3.tgz#222bc802a4f91c078013b6732b3e66ee82276aa5"
+  integrity sha512-P/cOgn9ZibbicxGaStuqkuWijJW+z0v4dANYQFXcxIxbMn94gCpVdaq1csXjdNnq8e0N8JErvbB46Iv+N7goPQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    "@math.gl/core" "3.2.0-alpha.3"
+    gl-matrix "^3.0.0"
+
 "@math.gl/geospatial@^3.1.2", "@math.gl/geospatial@^3.1.3":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@math.gl/geospatial/-/geospatial-3.1.3.tgz#0be9b1a77b892d55a030cfc1dee2b1325c47feaf"
@@ -1862,6 +1879,14 @@
     "@babel/runtime" "^7.0.0"
     gl-matrix "^3.0.0"
 
+"@math.gl/web-mercator@^3.2.0-alpha.3":
+  version "3.2.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/@math.gl/web-mercator/-/web-mercator-3.2.0-alpha.3.tgz#619c1ca380b213c8c89167bfc05578c4be04bd00"
+  integrity sha512-H68bpmfODFrJaWoRZdHMMKVjIu6J/0hwwig+CO3uDF21Q3ICDFOgzEFyaE/Qc10fakiyjfQCztBiWcXi3QcFsg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    gl-matrix "^3.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -7058,12 +7083,12 @@ mapbox-gl@^1.0.0, mapbox-gl@^1.2.1:
     tinyqueue "^2.0.0"
     vt-pbf "^3.1.1"
 
-math.gl@^3.1.2, math.gl@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/math.gl/-/math.gl-3.1.3.tgz#1e702df8cba024cc229e18e3c57c60a27943cb95"
-  integrity sha512-3OYCtzTOW1wkZufjsxk8g1D77+z+x7QehOZcMFPGgw1QjVEFNcyy3ql6hdrZpUlkyE3pX4lYak7WOIE+n0obYg==
+math.gl@3.2.0-alpha.3, math.gl@^3.1.2, math.gl@^3.1.3, math.gl@^3.2.0-alpha.3:
+  version "3.2.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/math.gl/-/math.gl-3.2.0-alpha.3.tgz#b922257fab423717de54a0abf6e63fd3973bf62c"
+  integrity sha512-LHzjYRXORQGoMOI6bNv7C61VE5fwGWUnNFHm5/O9oYEEj14ilAG1HhgXf6sMYleGjNNYmuPF8S14cP1bafUA8Q==
   dependencies:
-    "@math.gl/core" "3.1.3"
+    "@math.gl/core" "3.2.0-alpha.3"
 
 md5.js@^1.3.4:
   version "1.3.5"