Merge branch 'master' into x/picking-fix

docs/api-reference/layer.md

@@ -238,9 +238,11 @@ Specifies a longitude and a latitude from which meter offsets are calculated. Se
 
 ##### `wrapLongitude` (Boolean, optional)
 
-Automatically wraps longitudes over the 180th antimeridian for the best visibility in the current viewport.
+Automatically wraps longitudes over the 180th antimeridian.
 
-This option is applied per vertex by dynamically moving the antimeridian the furthest away from the current center of the viewport. It is useful when viewing local data that cross the 180th meridian. However, path/polygon features that get split by the dynamic antimeridian may still be rendered incorrectly. When viewing at a global zoom level, it is recommended that you disable this option and preprocess the data for their best placement.
+When enabled on `PathLayer`, `PolygonLayer` and `GeoJsonLayer`, the paths/polygons are interpretted such that the connection between any two neighboring vertices is drawn on the shorter side of the world, and split into two if it crosses the 180th meridian. Note that this introduces CPU overhead at runtime. When working with static data, it is recommend that you preprocess the features offline instead of using this option.
+
+When enabled on other layers, the effect is applied per vertex by dynamically moving the antimeridian the furthest away from the current center of the viewport. It is most useful when viewing local data that cross the 180th meridian.
 
 Default `false`.
 

modules/core/src/lib/layer.js

@@ -152,6 +152,10 @@ export default class Layer extends Component {
     return this.internalState && !this.internalState.isAsyncPropLoading();
   }
 
+  get wrapLongitude() {
+    return this.props.wrapLongitude;
+  }
+
   // Returns true if the layer is pickable and visible.
   isPickable() {
     return this.props.pickable && this.props.visible;

modules/core/src/passes/layers-pass.js

@@ -156,6 +156,7 @@ export default class LayersPass extends Pass {
 
   _getModuleParameters(layer, effects, pass, overrides) {
     const moduleParameters = Object.assign(Object.create(layer.props), {
+      autoWrapLongitude: layer.wrapLongitude,
       viewport: layer.context.viewport,
       mousePosition: layer.context.mousePosition,
       pickingActive: 0,

modules/core/src/shaderlib/project/viewport-uniforms.js

@@ -171,7 +171,7 @@ export function getUniformsFromViewport({
   // Match Layer.defaultProps
   coordinateSystem = COORDINATE_SYSTEM.DEFAULT,
   coordinateOrigin,
-  wrapLongitude = false,
+  autoWrapLongitude = false,
   // Deprecated
   projectionMode,
   positionOrigin
@@ -191,7 +191,7 @@ export function getUniformsFromViewport({
     coordinateOrigin
   });
 
-  uniforms.project_uWrapLongitude = wrapLongitude;
+  uniforms.project_uWrapLongitude = autoWrapLongitude;
   uniforms.project_uModelMatrix = modelMatrix || IDENTITY_MATRIX;
 
   return uniforms;

modules/geo-layers/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@loaders.gl/3d-tiles": "^2.1.5",
     "@loaders.gl/core": "^2.1.5",
+    "@loaders.gl/loader-utils": "^2.2.0-alpha.3",
     "@loaders.gl/mvt": "^2.1.5",
     "@loaders.gl/terrain": "^2.1.5",
     "@loaders.gl/tiles": "^2.1.5",

modules/geo-layers/src/tile-layer/tile-2d-header.js

@@ -1,17 +1,18 @@
 import {log} from '@deck.gl/core';
-import {isPromise} from '@loaders.gl/core';
 
 export default class Tile2DHeader {
   constructor({x, y, z, onTileLoad, onTileError}) {
     this.x = x;
     this.y = y;
     this.z = z;
     this.isVisible = false;
+    this.isSelected = false;
     this.parent = null;
     this.children = [];
 
     this.content = null;
     this._isLoaded = false;
+    this._isCancelled = false;
 
     this.onTileLoad = onTileLoad;
     this.onTileError = onTileError;
@@ -25,6 +26,10 @@ export default class Tile2DHeader {
     return this._isLoaded;
   }
 
+  get isCancelled() {
+    return this._isCancelled;
+  }
+
   get byteLength() {
     const result = this.content ? this.content.byteLength : 0;
     if (!Number.isFinite(result)) {
@@ -33,38 +38,43 @@ export default class Tile2DHeader {
     return result;
   }
 
-  loadData(getTileData) {
+  async _loadData(getTileData, requestScheduler) {
     const {x, y, z, bbox} = this;
-    if (!getTileData) {
+
+    const requestToken = await requestScheduler.scheduleRequest(this, tile => {
+      return tile.isSelected;
+    });
+
+    if (!requestToken) {
+      this._isCancelled = true;
       return;
     }
 
+    this._isCancelled = false;
     let tileData;
+    let error;
     try {
-      tileData = getTileData({x, y, z, bbox});
+      tileData = await getTileData({x, y, z, bbox});
     } catch (err) {
+      error = err || true;
+    } finally {
+      requestToken.done();
       this._isLoaded = true;
-      this.onTileError(err, this);
-      return;
     }
 
-    if (!isPromise(tileData)) {
+    if (error) {
+      this.onTileError(error, this);
+    } else {
       this.content = tileData;
-      this._isLoaded = true;
       this.onTileLoad(this);
+    }
+  }
+
+  loadData(getTileData, requestScheduler) {
+    if (!getTileData) {
       return;
     }
 
-    this._loader = tileData
-      .then(buffers => {
-        this.content = buffers;
-        this._isLoaded = true;
-        this.onTileLoad(this);
-        return buffers;
-      })
-      .catch(err => {
-        this._isLoaded = true;
-        this.onTileError(err, this);
-      });
+    this._loader = this._loadData(getTileData, requestScheduler);
   }
 }

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

@@ -21,7 +21,9 @@ const defaultProps = {
   maxCacheSize: null,
   maxCacheByteSize: null,
   refinementStrategy: STRATEGY_DEFAULT,
-  zRange: null
+  zRange: null,
+  throttleRequests: true,
+  maxRequests: 8
 };
 
 export default class TileLayer extends CompositeLayer {
@@ -59,7 +61,9 @@ export default class TileLayer extends CompositeLayer {
         maxCacheSize,
         maxCacheByteSize,
         refinementStrategy,
-        extent
+        extent,
+        throttleRequests,
+        maxRequests
       } = props;
       tileset = new Tileset2D({
         getTileData: this.getTileData.bind(this),
@@ -71,7 +75,9 @@ export default class TileLayer extends CompositeLayer {
         refinementStrategy,
         extent,
         onTileLoad: this._onTileLoad.bind(this),
-        onTileError: this._onTileError.bind(this)
+        onTileError: this._onTileError.bind(this),
+        throttleRequests,
+        maxRequests
       });
       this.setState({tileset});
     } else if (changeFlags.propsChanged || changeFlags.updateTriggersChanged) {

modules/geo-layers/src/tile-layer/tileset-2d.js

@@ -1,5 +1,6 @@
 import Tile2DHeader from './tile-2d-header';
 import {getTileIndices, tileToBoundingBox} from './utils';
+import {RequestScheduler} from '@loaders.gl/loader-utils';
 
 const TILE_STATE_UNKNOWN = 0;
 const TILE_STATE_VISIBLE = 1;
@@ -55,6 +56,11 @@ export default class Tileset2D {
       }
     };
 
+    this._requestScheduler = new RequestScheduler({
+      maxRequests: opts.maxRequests,
+      throttleRequests: opts.throttleRequests && opts.maxRequests > 0
+    });
+
     // Maps tile id in string {z}-{x}-{y} to a Tile object
     this._cache = new Map();
     this._tiles = [];
@@ -161,6 +167,9 @@ export default class Tileset2D {
         changed = true;
         tile.isVisible = isVisible;
       }
+
+      // isSelected used in request scheduler
+      tile.isSelected = tile.state === TILE_STATE_SELECTED;
     }
 
     return changed;
@@ -273,10 +282,13 @@ export default class Tileset2D {
         onTileError: this.onTileError
       });
       Object.assign(tile, this.getTileMetadata(tile));
-      tile.loadData(this._getTileData);
+      tile.loadData(this._getTileData, this._requestScheduler);
       this._cache.set(tileId, tile);
       this._dirty = true;
+    } else if (tile && tile.isCancelled) {
+      tile.loadData(this._getTileData, this._requestScheduler);
     }
+
     return tile;
   }
 

modules/layers/src/path-layer/path-layer.js

@@ -56,6 +56,10 @@ export default class PathLayer extends Layer {
     return super.getShaders({vs, fs, modules: [project32, picking]}); // 'project' module added by default.
   }
 
+  get wrapLongitude() {
+    return false;
+  }
+
   initializeState() {
     const noAlloc = true;
     const attributeManager = this.getAttributeManager();
@@ -148,6 +152,7 @@ export default class PathLayer extends Layer {
         loop: props._pathType === 'loop',
         getGeometry: props.getPath,
         positionFormat: props.positionFormat,
+        wrapLongitude: props.wrapLongitude,
         // TODO - move the flag out of the viewport
         resolution: this.context.viewport.resolution,
         dataChanged: changeFlags.dataChanged

modules/layers/src/path-layer/path-tesselator.js

@@ -54,7 +54,7 @@ export default class PathTesselator extends Tesselator {
 
   normalizeGeometry(path) {
     if (this.normalize) {
-      return normalizePath(path, this.positionSize, this.opts.resolution);
+      return normalizePath(path, this.positionSize, this.opts.resolution, this.opts.wrapLongitude);
     }
     return path;
   }
@@ -66,6 +66,13 @@ export default class PathTesselator extends Tesselator {
 
   /* Implement base Tesselator interface */
   getGeometrySize(path) {
+    if (Array.isArray(path[0])) {
+      let size = 0;
+      for (const subPath of path) {
+        size += this.getGeometrySize(subPath);
+      }
+      return size;
+    }
     const numPoints = this.getPathLength(path);
     if (numPoints < 2) {
       // invalid path
@@ -82,8 +89,17 @@ export default class PathTesselator extends Tesselator {
     if (context.geometrySize === 0) {
       return;
     }
-    this._updateSegmentTypes(path, context);
-    this._updatePositions(path, context);
+    if (path && Array.isArray(path[0])) {
+      for (const subPath of path) {
+        const geometrySize = this.getGeometrySize(subPath);
+        context.geometrySize = geometrySize;
+        this.updateGeometryAttributes(subPath, context);
+        context.vertexStart += geometrySize;
+      }
+    } else {
+      this._updateSegmentTypes(path, context);
+      this._updatePositions(path, context);
+    }
   }
 
   _updateSegmentTypes(path, context) {

modules/layers/src/path-layer/path.js

@@ -1,10 +1,10 @@
-import {cutPolylineByGrid} from '@math.gl/polygon';
+import {cutPolylineByGrid, cutPolylineByMercatorBounds} from '@math.gl/polygon';
 
 /** Returns a flat array of path positions
  * Flattens a nested path object
  * Cut the feature if needed (globe projection, wrap longitude, etc.)
  */
-export function normalizePath(path, size, gridResolution) {
+export function normalizePath(path, size, gridResolution, wrapLongitude) {
   let flatPath = path;
   if (Array.isArray(path[0])) {
     const length = path.length * size;
@@ -18,5 +18,8 @@ export function normalizePath(path, size, gridResolution) {
   if (gridResolution) {
     return cutPolylineByGrid(flatPath, {size, gridResolution});
   }
+  if (wrapLongitude) {
+    return cutPolylineByMercatorBounds(flatPath, {size});
+  }
   return flatPath;
 }

modules/layers/src/solid-polygon-layer/polygon-tesselator.js

@@ -25,7 +25,7 @@
 // - 3D wireframes (not yet)
 import * as Polygon from './polygon';
 import {Tesselator} from '@deck.gl/core';
-import {cutPolygonByGrid} from '@math.gl/polygon';
+import {cutPolygonByGrid, cutPolygonByMercatorBounds} from '@math.gl/polygon';
 
 // This class is set up to allow querying one attribute at a time
 // the way the AttributeManager expects it
@@ -72,6 +72,13 @@ export default class PolygonTesselator extends Tesselator {
           edgeTypes: true
         });
       }
+      if (this.opts.wrapLongitude) {
+        return cutPolygonByMercatorBounds(polygon.positions || polygon, polygon.holeIndices, {
+          size: this.positionSize,
+          maxLatitude: 86,
+          edgeTypes: true
+        });
+      }
     }
     return polygon;
   }

modules/layers/src/solid-polygon-layer/solid-polygon-layer.js

@@ -70,6 +70,10 @@ export default class SolidPolygonLayer extends Layer {
     });
   }
 
+  get wrapLongitude() {
+    return false;
+  }
+
   initializeState() {
     const {gl, viewport} = this.context;
     let {coordinateSystem} = this.props;
@@ -273,6 +277,7 @@ export default class SolidPolygonLayer extends Layer {
         buffers,
         getGeometry: props.getPolygon,
         positionFormat: props.positionFormat,
+        wrapLongitude: props.wrapLongitude,
         // TODO - move the flag out of the viewport
         resolution: this.context.viewport.resolution,
         fp64: this.use64bitPositions(),

modules/react/src/utils/extract-jsx-layers.js

@@ -15,6 +15,9 @@ function wrapInView(node) {
   if (Array.isArray(node)) {
     return node.map(wrapInView);
   }
+  if (node.type === React.Fragment) {
+    return wrapInView(node.props.children);
+  }
   if (inheritsFrom(node.type, View)) {
     return node;
   }

package.json

@@ -41,6 +41,7 @@
     "jsdom": false
   },
   "resolutions": {
+    "@loaders.gl/loader-utils": "^2.2.0-alpha.3",
     "@math.gl/core": "3.2.0-alpha.5"
   },
   "devDependencies": {