@mapwhit/tilerenderer 1.2.2 → 1.4.0

package/src/source/geojson_tiler.js

@@ -0,0 +1,89 @@
+import rewind from '@mapwhit/geojson-rewind';
+import geojsonvt from 'geojson-vt';
+import Supercluster from 'supercluster';
+import FeatureIndex from '../data/feature_index.js';
+import GeoJSONWrapper from './geojson_wrapper.js';
+import { makeSingleSourceLayerWorkerTile as makeWorkerTile } from './worker_tile.js';
+
+/**
+ * Creates tiles from GeoJSON data.
+ */
+export default function makeTiler(resources, layerIndex) {
+  let geoJSONIndex;
+  let createGeoJSONIndex;
+
+  /**
+   * Fetches (if appropriate), parses, and index geojson data into tiles. This
+   * preparatory method must be called before {@link GeoJSONWorkerSource#loadTile}
+   * can correctly serve up tiles.
+   *
+   * Defers to {@link GeoJSONWorkerSource#loadGeoJSON} for the fetching/parsing,
+   * expecting `callback(error, data)` to be called with either an error or a
+   * parsed GeoJSON object.
+   *
+   * @param params
+   */
+  function loadData(params) {
+    const { cluster, data, geojsonVtOptions, superclusterOptions } = params;
+    geoJSONIndex = undefined;
+    createGeoJSONIndex = cluster
+      ? () => {
+          rewind(data, true);
+          return new Supercluster(superclusterOptions).load(data.features);
+        }
+      : () => {
+          rewind(data, true);
+          return geojsonvt(data, geojsonVtOptions);
+        };
+  }
+
+  function getTile(tileID) {
+    if (!geoJSONIndex) {
+      if (!createGeoJSONIndex) {
+        return; // we couldn't load the file
+      }
+
+      try {
+        geoJSONIndex = createGeoJSONIndex();
+      } finally {
+        createGeoJSONIndex = undefined;
+      }
+    }
+    const { z, x, y } = tileID.canonical;
+    return geoJSONIndex.getTile(z, x, y);
+  }
+
+  /**
+   * Returns a single tile.
+   */
+  async function loadTile(params) {
+    const { tileID, source, promoteId } = params;
+    const geoJSONTile = getTile(tileID);
+    if (!geoJSONTile) {
+      return; // nothing in the given tile
+    }
+    const sourceLayer = new GeoJSONWrapper(geoJSONTile.features);
+    const layerFamilies = layerIndex.familiesBySource.get(source);
+    if (!layerFamilies) {
+      return;
+    }
+    params.featureIndex = new FeatureIndex(tileID, promoteId);
+    const { name } = sourceLayer;
+    const features = new Array(sourceLayer.length);
+    for (let index = 0; index < sourceLayer.length; index++) {
+      const feature = sourceLayer.feature(index);
+      const id = params.featureIndex.getId(feature, name);
+      features[index] = { feature, id, index, sourceLayerIndex: 0 };
+    }
+
+    const result = await makeWorkerTile(params, features, layerFamilies.get(name), resources);
+
+    result.vectorTile = sourceLayer;
+    return result;
+  }
+
+  return {
+    loadData,
+    loadTile
+  };
+}

package/src/source/source.js

@@ -25,6 +25,7 @@ import { bindAll } from '../util/object.js';
  */
 
 import geojson from './geojson_source.js';
+import geojsonTiler from './geojson_tiler.js';
 import image from './image_source.js';
 import rasterDem from './raster_dem_tile_source.js';
 import raster from './raster_tile_source.js';
@@ -38,6 +39,9 @@ const sourceTypes = {
   image
 };
 
+const tilerTypes = {
+  geojson: geojsonTiler
+};
 /*
  * Creates a tiled data source instance given an options object.
  *
@@ -48,11 +52,18 @@ const sourceTypes = {
  * @returns {Source}
  */
 export function create(id, specification, eventedParent, { resources, layerIndex, showTileBoundaries }) {
-  const source = new sourceTypes[specification.type](id, specification, eventedParent, {
-    resources,
-    layerIndex,
-    showTileBoundaries
-  });
+  const tiler = tilerTypes[specification.type]?.(resources, layerIndex);
+
+  const source = new sourceTypes[specification.type](
+    id,
+    specification,
+    eventedParent,
+    tiler ?? {
+      resources,
+      layerIndex,
+      showTileBoundaries
+    }
+  );
 
   bindAll(['load', 'abort', 'unload', 'serialize', 'prepare'], source);
   return source;

package/src/source/source_cache.js

@@ -799,27 +799,27 @@ class SourceCache extends Evented {
    * Set the value of a particular state for a feature
    * @private
    */
-  setFeatureState(sourceLayer, feature, state) {
+  setFeatureState(sourceLayer, featureId, state) {
     sourceLayer = sourceLayer || '_geojsonTileLayer';
-    this._state.updateState(sourceLayer, feature, state);
+    this._state.updateState(sourceLayer, featureId, state);
   }
 
   /**
    * Resets the value of a particular state key for a feature
    * @private
    */
-  removeFeatureState(sourceLayer, feature, key) {
+  removeFeatureState(sourceLayer, featureId, key) {
     sourceLayer = sourceLayer || '_geojsonTileLayer';
-    this._state.removeFeatureState(sourceLayer, feature, key);
+    this._state.removeFeatureState(sourceLayer, featureId, key);
   }
 
   /**
    * Get the entire state object for a feature
    * @private
    */
-  getFeatureState(sourceLayer, feature) {
+  getFeatureState(sourceLayer, featureId) {
     sourceLayer = sourceLayer || '_geojsonTileLayer';
-    return this._state.getState(sourceLayer, feature);
+    return this._state.getState(sourceLayer, featureId);
   }
 }
 

package/src/source/source_state.js

@@ -13,7 +13,8 @@ class SourceFeatureState {
   #stateChanges = {};
   #deletedStates = {};
 
-  updateState(sourceLayer, feature, newState) {
+  updateState(sourceLayer, featureId, newState) {
+    const feature = String(featureId);
     const changes = (this.#stateChanges[sourceLayer] ??= {});
     const featureState = (changes[feature] ??= {});
     Object.assign(featureState, newState);
@@ -76,7 +77,8 @@ class SourceFeatureState {
     }
   }
 
-  getState(sourceLayer, feature) {
+  getState(sourceLayer, featureId) {
+    const feature = String(featureId);
     const base = this.#state[sourceLayer];
     const changes = this.#stateChanges[sourceLayer];
     const reconciledState = Object.assign({}, base?.[feature], changes?.[feature]);

package/src/source/tile.js

@@ -191,11 +191,12 @@ class Tile {
   }
 
   querySourceFeatures(result, params) {
-    if (!this.latestFeatureIndex?.vectorTile) {
+    const featureIndex = this.latestFeatureIndex;
+    if (!featureIndex?.vectorTile) {
       return;
     }
 
-    const vtLayers = this.latestFeatureIndex.loadVTLayers();
+    const vtLayers = featureIndex.loadVTLayers();
 
     const sourceLayer = params ? params.sourceLayer : '';
     const layer = vtLayers._geojsonTileLayer || vtLayers[sourceLayer];
@@ -211,7 +212,8 @@ class Tile {
     for (let i = 0; i < layer.length; i++) {
       const feature = layer.feature(i);
       if (filter(new EvaluationParameters(this.tileID.overscaledZ), feature)) {
-        const geojsonFeature = new GeoJSONFeature(feature, z, x, y);
+        const id = featureIndex.getId(feature, sourceLayer);
+        const geojsonFeature = new GeoJSONFeature(feature, z, x, y, id);
         geojsonFeature.tile = coord;
         result.push(geojsonFeature);
       }

package/src/source/vector_tile_source.js

@@ -22,6 +22,7 @@ class VectorTileSource extends Evented {
     this.url = options.url;
     this.scheme = options.scheme ?? 'xyz';
     this.tileSize = options.tileSize ?? 512;
+    this.promoteId = options.promoteId;
 
     if (this.tileSize !== 512) {
       throw new Error('vector tile sources must have a tileSize of 512');
@@ -93,6 +94,7 @@ class VectorTileSource extends Evented {
         source: this.id,
         pixelRatio: browser.devicePixelRatio,
         showCollisionBoxes: this.map.showCollisionBoxes,
+        promoteId: this.promoteId,
         painter: this.map.painter
       };
       tile.workerID ??= true;

package/src/source/worker_tile.js

@@ -27,7 +27,9 @@ async function makeWorkerTile(params, { layers }, layerIndex, resources) {
     const sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
     const features = new Array(sourceLayer.length);
     for (let index = 0; index < sourceLayer.length; index++) {
-      features[index] = { feature: sourceLayer.feature(index), index, sourceLayerIndex };
+      const feature = sourceLayer.feature(index);
+      const id = options.featureIndex.getId(feature, sourceLayerId);
+      features[index] = { feature, id, index, sourceLayerIndex };
     }
 
     makeBucketsForSourceLayer(sourceLayerFamilies, sourceLayerIndex, features, params, options);
@@ -47,7 +49,7 @@ export async function makeSingleSourceLayerWorkerTile(params, features, sourceLa
 function initializeBucketsOptions(params) {
   const tileID = createTileID(params);
 
-  const featureIndex = new FeatureIndex(tileID);
+  const featureIndex = params.featureIndex ?? new FeatureIndex(tileID, params.promoteId);
   featureIndex.bucketLayerIDs = [];
 
   return {

package/src/style/pauseable_placement.js

@@ -2,27 +2,59 @@ import { Placement } from '../symbol/placement.js';
 import browser from '../util/browser.js';
 
 class LayerPlacement {
-  constructor() {
+  constructor(styleLayer) {
+    this._sortAcrossTiles =
+      styleLayer._layout.get('symbol-z-order') !== 'viewport-y' &&
+      styleLayer._layout.get('symbol-sort-key').constantOr(1) !== undefined;
+
     this._currentTileIndex = 0;
+    this._currentPartIndex = 0;
     this._seenCrossTileIDs = {};
+    this._bucketParts = [];
   }
 
   continuePlacement(tiles, placement, showCollisionBoxes, styleLayer, shouldPausePlacement) {
+    const bucketParts = this._bucketParts;
+
     while (this._currentTileIndex < tiles.length) {
       const tile = tiles[this._currentTileIndex];
-      placement.placeLayerTile(styleLayer, tile, showCollisionBoxes, this._seenCrossTileIDs);
+      placement.getBucketParts(bucketParts, styleLayer, tile, this._sortAcrossTiles);
 
       this._currentTileIndex++;
       if (shouldPausePlacement()) {
         return true;
       }
     }
+
+    if (this._sortAcrossTiles) {
+      this._sortAcrossTiles = false;
+      bucketParts.sort((a, b) => a.sortKey - b.sortKey);
+    }
+
+    while (this._currentPartIndex < bucketParts.length) {
+      const bucketPart = bucketParts[this._currentPartIndex];
+      placement.placeLayerBucketPart(bucketPart, this._seenCrossTileIDs, showCollisionBoxes);
+
+      this._currentPartIndex++;
+      if (shouldPausePlacement()) {
+        return true;
+      }
+    }
+    return false;
   }
 }
 
 class PauseablePlacement {
-  constructor(transform, maxIndex, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions) {
-    this.placement = new Placement(transform, fadeDuration, crossSourceCollisions);
+  constructor(
+    transform,
+    maxIndex,
+    forceFullPlacement,
+    showCollisionBoxes,
+    fadeDuration,
+    crossSourceCollisions,
+    prevPlacement
+  ) {
+    this.placement = new Placement(transform, fadeDuration, crossSourceCollisions, prevPlacement);
     this._currentPlacementIndex = maxIndex;
     this._forceFullPlacement = forceFullPlacement;
     this._showCollisionBoxes = showCollisionBoxes;
@@ -50,7 +82,7 @@ class PauseablePlacement {
         (!layer.maxzoom || layer.maxzoom > placementZoom)
       ) {
         if (!this._inProgressLayer) {
-          this._inProgressLayer = new LayerPlacement();
+          this._inProgressLayer = new LayerPlacement(layer);
         }
 
         const pausePlacement = this._inProgressLayer.continuePlacement(
@@ -77,8 +109,8 @@ class PauseablePlacement {
     this._done = true;
   }
 
-  commit(previousPlacement, now) {
-    this.placement.commit(previousPlacement, now);
+  commit(now) {
+    this.placement.commit(now);
     return this.placement;
   }
 }

package/src/style/style.js

@@ -41,6 +41,7 @@ class Style extends Evented {
     loadGlyphRange: this.loadGlyphRange.bind(this)
   });
   #layerIndex = new StyleLayerIndex();
+  #opsQueue = [];
 
   constructor(map, options = {}) {
     super();
@@ -89,7 +90,10 @@ class Style extends Evented {
   }
 
   setGlobalStateProperty(name, value) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setGlobalStateProperty(name, value));
+      return;
+    }
 
     const newValue = value === null ? (this.stylesheet.state?.[name]?.default ?? null) : value;
 
@@ -107,7 +111,10 @@ class Style extends Evented {
   }
 
   setGlobalState(newStylesheetState) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setGlobalState(newStylesheetState));
+      return;
+    }
 
     const changedGlobalStateRefs = [];
 
@@ -225,6 +232,9 @@ class Style extends Evented {
     this.light = this.stylesheet.light;
     this._light = new Light(this.light);
 
+    this.#opsQueue.forEach(op => op());
+    this.#opsQueue = [];
+
     this.fire(new Event('data', { dataType: 'style' }));
     this.fire(new Event('style.load'));
   }
@@ -301,12 +311,6 @@ class Style extends Evented {
     return false;
   }
 
-  _checkLoaded() {
-    if (!this._loaded) {
-      throw new Error('Style is not done loading');
-    }
-  }
-
   /**
    * Apply queued style updates in a batch and recalculate zoom-dependent paint properties.
    */
@@ -390,13 +394,18 @@ class Style extends Evented {
   }
 
   listImages() {
-    this._checkLoaded();
+    if (!this._loaded) {
+      return;
+    }
 
     return this.imageManager.listImages();
   }
 
   addSource(id, source) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.addSource(id, source));
+      return;
+    }
 
     if (this._sources[id] !== undefined) {
       throw new Error('There is already a source with this ID');
@@ -432,7 +441,10 @@ class Style extends Evented {
    * @throws {Error} if no source is found with the given ID
    */
   removeSource(id) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.removeSource(id));
+      return;
+    }
 
     if (this._sources[id] === undefined) {
       throw new Error('There is no source with this ID');
@@ -464,7 +476,10 @@ class Style extends Evented {
    * @param {GeoJSON|string} data GeoJSON source
    */
   setGeoJSONSourceData(id, data) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setGeoJSONSourceData(id, data));
+      return;
+    }
 
     assert(this._sources[id] !== undefined, 'There is no source with this ID');
     const geojsonSource = this._sources[id].getSource();
@@ -519,7 +534,10 @@ class Style extends Evented {
    * @param {string} [before] ID of an existing layer to insert before
    */
   addLayer(layerObject, before) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.addLayer(layerObject, before));
+      return;
+    }
 
     const id = layerObject.id;
 
@@ -568,7 +586,10 @@ class Style extends Evented {
    * @param {string} [before] ID of an existing layer to insert before
    */
   moveLayer(id, before) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.moveLayer(id, before));
+      return;
+    }
     this._changed = true;
 
     const layer = this._layers.get(id);
@@ -593,7 +614,10 @@ class Style extends Evented {
    * @fires error
    */
   removeLayer(id) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.removeLayer(id));
+      return;
+    }
 
     const layer = this._layers.get(id);
     if (!layer) {
@@ -624,7 +648,10 @@ class Style extends Evented {
   }
 
   setLayerZoomRange(layerId, minzoom, maxzoom) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setLayerZoomRange(layerId, minzoom, maxzoom));
+      return;
+    }
 
     const layer = this.getLayer(layerId);
     if (!layer) {
@@ -646,7 +673,10 @@ class Style extends Evented {
   }
 
   setFilter(layerId, filter) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setFilter(layerId, filter));
+      return;
+    }
 
     const layer = this.getLayer(layerId);
     if (!layer) {
@@ -680,7 +710,10 @@ class Style extends Evented {
   }
 
   setLayoutProperty(layerId, name, value) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setLayoutProperty(layerId, name, value));
+      return;
+    }
 
     const layer = this.getLayer(layerId);
     if (!layer) {
@@ -713,7 +746,10 @@ class Style extends Evented {
   }
 
   setPaintProperty(layerId, name, value) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setPaintProperty(layerId, name, value));
+      return;
+    }
 
     const layer = this.getLayer(layerId);
     if (!layer) {
@@ -748,10 +784,13 @@ class Style extends Evented {
     return this.getLayer(layer).getPaintProperty(name);
   }
 
-  setFeatureState(feature, state) {
-    this._checkLoaded();
-    const sourceId = feature.source;
-    const sourceLayer = feature.sourceLayer;
+  setFeatureState(target, state) {
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setFeatureState(target, state));
+      return;
+    }
+    const sourceId = target.source;
+    const sourceLayer = target.sourceLayer;
     const sourceCache = this._sources[sourceId];
 
     if (sourceCache === undefined) {
@@ -767,16 +806,19 @@ class Style extends Evented {
       this.fire(new ErrorEvent(new Error('The sourceLayer parameter must be provided for vector source types.')));
       return;
     }
-    if (feature.id == null || feature.id === '') {
+    if (target.id === undefined) {
       this.fire(new ErrorEvent(new Error('The feature id parameter must be provided.')));
       return;
     }
 
-    sourceCache.setFeatureState(sourceLayer, feature.id, state);
+    sourceCache.setFeatureState(sourceLayer, target.id, state);
   }
 
   removeFeatureState(target, key) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.removeFeatureState(target, key));
+      return;
+    }
     const sourceId = target.source;
     const sourceCache = this._sources[sourceId];
 
@@ -801,10 +843,12 @@ class Style extends Evented {
     sourceCache.removeFeatureState(sourceLayer, target.id, key);
   }
 
-  getFeatureState(feature) {
-    this._checkLoaded();
-    const sourceId = feature.source;
-    const sourceLayer = feature.sourceLayer;
+  getFeatureState(target) {
+    if (!this._loaded) {
+      return;
+    }
+    const sourceId = target.source;
+    const sourceLayer = target.sourceLayer;
     const sourceCache = this._sources[sourceId];
 
     if (sourceCache === undefined) {
@@ -817,7 +861,11 @@ class Style extends Evented {
       return;
     }
 
-    return sourceCache.getFeatureState(sourceLayer, feature.id);
+    if (target.id === undefined) {
+      this.fire(new ErrorEvent(new Error('The feature id parameter must be provided.')));
+    }
+
+    return sourceCache.getFeatureState(sourceLayer, target.id);
   }
 
   getTransition() {
@@ -962,7 +1010,10 @@ class Style extends Evented {
   }
 
   setLight(lightOptions) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setLight(lightOptions));
+      return;
+    }
 
     const light = this._light.getLight();
     let _update = false;
@@ -1070,7 +1121,8 @@ class Style extends Evented {
         forceFullPlacement,
         showCollisionBoxes,
         fadeDuration,
-        crossSourceCollisions
+        crossSourceCollisions,
+        this.placement
       );
       this._layerOrderChanged = false;
     }
@@ -1085,7 +1137,7 @@ class Style extends Evented {
       this.pauseablePlacement.continuePlacement(Array.from(this._layers.values()), layerTiles);
 
       if (this.pauseablePlacement.isDone()) {
-        this.placement = this.pauseablePlacement.commit(this.placement, browser.now());
+        this.placement = this.pauseablePlacement.commit(browser.now());
         placementCommitted = true;
       }
 

package/src/style/style_layer/circle_style_layer_properties.js

@@ -2,6 +2,13 @@
 
 import { DataConstantProperty, DataDrivenProperty, Properties } from '../properties.js';
 
+const layout = new Properties({
+  'circle-sort-key': new DataDrivenProperty({
+    type: 'number',
+    expression: { parameters: ['zoom', 'feature'] }
+  })
+});
+
 const paint = new Properties({
   'circle-radius': new DataDrivenProperty({
     type: 'number',
@@ -73,4 +80,4 @@ const paint = new Properties({
   })
 });
 
-export default { paint };
+export default { paint, layout };

package/src/style/style_layer/fill_style_layer_properties.js

@@ -2,6 +2,13 @@
 
 import { CrossFadedDataDrivenProperty, DataConstantProperty, DataDrivenProperty, Properties } from '../properties.js';
 
+const layout = new Properties({
+  'fill-sort-key': new DataDrivenProperty({
+    type: 'number',
+    expression: { parameters: ['zoom', 'feature'] }
+  })
+});
+
 const paint = new Properties({
   'fill-antialias': new DataConstantProperty({ type: 'boolean', default: true, expression: { parameters: ['zoom'] } }),
   'fill-opacity': new DataDrivenProperty({
@@ -42,4 +49,4 @@ const paint = new Properties({
   })
 });
 
-export default { paint };
+export default { paint, layout };

package/src/style/style_layer/line_style_layer_properties.js

@@ -31,6 +31,10 @@ const layout = new Properties({
     type: 'number',
     default: 1.05,
     expression: { interpolated: true, parameters: ['zoom'] }
+  }),
+  'line-sort-key': new DataDrivenProperty({
+    type: 'number',
+    expression: { parameters: ['zoom', 'feature'] }
   })
 });
 const paint = new Properties({