@mapwhit/tilerenderer 0.52.1 → 1.0.0

package/src/source/worker_tile.js

@@ -7,7 +7,7 @@ const SymbolBucket = require('../data/bucket/symbol_bucket');
 const LineBucket = require('../data/bucket/line_bucket');
 const FillBucket = require('../data/bucket/fill_bucket');
 const FillExtrusionBucket = require('../data/bucket/fill_extrusion_bucket');
-const { mapObject, values } = require('../util/object');
+const { mapObject } = require('../util/object');
 const warn = require('../util/warn');
 const assert = require('assert');
 const ImageAtlas = require('../render/image_atlas');
@@ -15,134 +15,139 @@ const GlyphAtlas = require('../render/glyph_atlas');
 const EvaluationParameters = require('../style/evaluation_parameters');
 const { OverscaledTileID } = require('./tile_id');
 
-class WorkerTile {
-  constructor(params) {
-    this.tileID = new OverscaledTileID(
-      params.tileID.overscaledZ,
-      params.tileID.wrap,
-      params.tileID.canonical.z,
-      params.tileID.canonical.x,
-      params.tileID.canonical.y
-    );
-    this.uid = params.uid;
-    this.zoom = params.zoom;
-    this.pixelRatio = params.pixelRatio;
-    this.tileSize = params.tileSize;
-    this.source = params.source;
-    this.overscaling = this.tileID.overscaleFactor();
-    this.showCollisionBoxes = params.showCollisionBoxes;
-    this.globalState = params.globalState;
-  }
+module.exports = makeWorkerTile;
 
-  async parse(data, layerIndex, resources) {
-    this.status = 'parsing';
-    this.data = data;
+async function makeWorkerTile(params, vectorTile, layerIndex, resources) {
+  const tileID = createTileID(params);
 
-    this.collisionBoxArray = new CollisionBoxArray();
-    const sourceLayerCoder = dictionaryCoder(Object.keys(data.layers));
+  const overscaling = tileID.overscaleFactor();
+  const { uid, zoom, pixelRatio, source, showCollisionBoxes, globalState, justReloaded, painter } = params;
 
-    const featureIndex = new FeatureIndex(this.tileID);
-    featureIndex.bucketLayerIDs = [];
+  const collisionBoxArray = new CollisionBoxArray();
+  const sourceLayerCoder = dictionaryCoder(Object.keys(vectorTile.layers));
 
-    const buckets = {};
+  const featureIndex = new FeatureIndex(tileID);
+  featureIndex.bucketLayerIDs = [];
 
-    const options = {
-      featureIndex,
-      iconDependencies: {},
-      patternDependencies: {},
-      glyphDependencies: {}
-    };
+  const uniqueBuckets = new Map();
 
-    const layerFamilies = layerIndex.familiesBySource[this.source];
-    for (const sourceLayerId in layerFamilies) {
-      const sourceLayer = data.layers[sourceLayerId];
-      if (!sourceLayer) {
-        continue;
-      }
+  const options = {
+    featureIndex,
+    iconDependencies: {},
+    patternDependencies: {},
+    glyphDependencies: {}
+  };
 
-      if (sourceLayer.version === 1) {
-        warn.once(
-          `Vector tile source "${this.source}" layer "${sourceLayerId}" ` +
-            'does not use vector tile spec v2 and therefore may have some rendering errors.'
-        );
-      }
+  const layerFamilies = layerIndex.familiesBySource.get(source) ?? new Map();
+  for (const [sourceLayerId, sourceLayerFamilies] of layerFamilies) {
+    const sourceLayer = vectorTile.layers[sourceLayerId];
+    if (!sourceLayer) {
+      continue;
+    }
 
-      const sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
-      const features = [];
-      for (let index = 0; index < sourceLayer.length; index++) {
-        const feature = sourceLayer.feature(index);
-        features.push({ feature, index, sourceLayerIndex });
-      }
+    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 };
+    }
 
-      for (const family of layerFamilies[sourceLayerId]) {
-        const layer = family[0];
-
-        assert(layer.source === this.source);
-        if (layer.minzoom && this.zoom < Math.floor(layer.minzoom)) continue;
-        if (layer.maxzoom && this.zoom >= layer.maxzoom) continue;
-        if (layer.visibility === 'none') continue;
-
-        recalculateLayers(family, this.zoom, this.globalState);
-
-        const bucket = (buckets[layer.id] = layer.createBucket({
-          index: featureIndex.bucketLayerIDs.length,
-          layers: family,
-          zoom: this.zoom,
-          pixelRatio: this.pixelRatio,
-          overscaling: this.overscaling,
-          collisionBoxArray: this.collisionBoxArray,
-          sourceLayerIndex: sourceLayerIndex,
-          sourceID: this.source,
-          globalState: this.globalState
-        }));
-
-        bucket.populate(features, options);
-        featureIndex.bucketLayerIDs.push(family.map(l => l.id));
-      }
+    for (const layers of sourceLayerFamilies.values()) {
+      const layer = layers[0];
+
+      if (layer.minzoom && zoom < Math.floor(layer.minzoom)) continue;
+      if (layer.maxzoom && zoom >= layer.maxzoom) continue;
+      if (layer.visibility === 'none') continue;
+
+      recalculateLayers(layers, zoom, globalState);
+
+      const bucket = layer.createBucket({
+        index: featureIndex.bucketLayerIDs.length,
+        layers,
+        zoom,
+        pixelRatio,
+        overscaling,
+        collisionBoxArray,
+        sourceLayerIndex,
+        sourceID: source,
+        globalState
+      });
+      uniqueBuckets.set(layer.id, bucket);
+      bucket.populate(features, options);
+      featureIndex.bucketLayerIDs.push(layers.map(l => l.id));
     }
+  }
 
-    const stacks = mapObject(options.glyphDependencies, glyphs => Object.keys(glyphs).map(Number));
-    const icons = Object.keys(options.iconDependencies);
-    const patterns = Object.keys(options.patternDependencies);
-    const tasks = [
-      Object.keys(stacks).length ? resources.getGlyphs({ uid: this.uid, stacks }) : {},
-      icons.length ? resources.getImages({ icons }) : {},
-      patterns.length ? resources.getImages({ icons: patterns }) : {}
-    ];
-    const [glyphMap, iconMap, patternMap] = await Promise.all(tasks);
-    const glyphAtlas = new GlyphAtlas(glyphMap);
-    const imageAtlas = new ImageAtlas(iconMap, patternMap);
-
-    for (const key in buckets) {
-      const bucket = buckets[key];
-      if (bucket instanceof SymbolBucket) {
-        recalculateLayers(bucket.layers, this.zoom, this.globalState);
-        performSymbolLayout(
-          bucket,
-          glyphMap,
-          glyphAtlas.positions,
-          iconMap,
-          imageAtlas.iconPositions,
-          this.showCollisionBoxes
-        );
-      } else if (
-        bucket.hasPattern &&
-        (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
-      ) {
-        recalculateLayers(bucket.layers, this.zoom, this.globalState);
-        bucket.addFeatures(options, imageAtlas.patternPositions);
+  const buckets = new Map();
+  const { glyphAtlas, imageAtlas, glyphMap, iconMap } = await makeAtlasses(options, resources);
+  let hasSymbolBuckets = false;
+  let queryPadding = 0;
+  for (const bucket of uniqueBuckets.values()) {
+    if (bucket instanceof SymbolBucket) {
+      hasSymbolBuckets = true;
+      recalculateLayers(bucket.layers, zoom, globalState);
+      performSymbolLayout(
+        bucket,
+        glyphMap,
+        glyphAtlas.positions,
+        iconMap,
+        imageAtlas.iconPositions,
+        showCollisionBoxes
+      );
+      if (justReloaded) {
+        bucket.justReloaded = true;
       }
+    } else if (
+      bucket.hasPattern &&
+      (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
+    ) {
+      recalculateLayers(bucket.layers, zoom, globalState);
+      bucket.addFeatures(options, imageAtlas.patternPositions);
+    }
+    if (bucket.isEmpty()) {
+      continue; // Skip empty buckets
+    }
+    bucket.stateDependentLayers = [];
+    for (const layer of bucket.layers) {
+      if (painter?.style) {
+        queryPadding = Math.max(queryPadding, painter.style.getLayer(layer.id).queryRadius(bucket));
+      }
+      if (layer.isStateDependent()) {
+        bucket.stateDependentLayers.push(layer);
+      }
+      buckets.set(layer.id, bucket);
     }
-
-    this.status = 'done';
-    return {
-      buckets: values(buckets).filter(b => !b.isEmpty()),
-      featureIndex,
-      collisionBoxArray: this.collisionBoxArray,
-      glyphAtlasImage: glyphAtlas.image,
-      imageAtlas
-    };
   }
+
+  return {
+    buckets,
+    featureIndex,
+    collisionBoxArray,
+    glyphAtlasImage: glyphAtlas.image,
+    imageAtlas,
+    hasSymbolBuckets,
+    queryPadding
+  };
+}
+
+async function makeAtlasses({ glyphDependencies, patternDependencies, iconDependencies }, resources) {
+  const stacks = mapObject(glyphDependencies, glyphs => Object.keys(glyphs).map(Number));
+  const icons = Object.keys(iconDependencies);
+  const patterns = Object.keys(patternDependencies);
+  const tasks = [
+    Object.keys(stacks).length ? resources.getGlyphs({ stacks }) : {},
+    icons.length ? resources.getImages({ icons }) : {},
+    patterns.length ? resources.getImages({ icons: patterns }) : {}
+  ];
+  const [glyphMap, iconMap, patternMap] = await Promise.all(tasks);
+  const glyphAtlas = new GlyphAtlas(glyphMap);
+  const imageAtlas = new ImageAtlas(iconMap, patternMap);
+  return { glyphAtlas, imageAtlas, glyphMap, iconMap };
+}
+
+function createTileID({ tileID }) {
+  const { overscaledZ, wrap, canonical } = tileID;
+  const { x, y, z } = canonical;
+  return new OverscaledTileID(overscaledZ, wrap, z, x, y);
 }
 
 function recalculateLayers(layers, zoom, globalState) {
@@ -152,5 +157,3 @@ function recalculateLayers(layers, zoom, globalState) {
     layer.recalculate(parameters);
   }
 }
-
-module.exports = WorkerTile;

package/src/style/create_style_layer.js

@@ -2,7 +2,7 @@ const circle = require('./style_layer/circle_style_layer');
 const heatmap = require('./style_layer/heatmap_style_layer');
 const hillshade = require('./style_layer/hillshade_style_layer');
 const fill = require('./style_layer/fill_style_layer');
-const fillExtrusion = require('./style_layer/fill_extrusion_style_layer');
+const { FillExtrusionStyleLayer: fillExtrusion } = require('./style_layer/fill_extrusion_style_layer');
 const line = require('./style_layer/line_style_layer');
 const symbol = require('./style_layer/symbol_style_layer');
 const background = require('./style_layer/background_style_layer');

package/src/style/pauseable_placement.js

@@ -22,9 +22,9 @@ class LayerPlacement {
 }
 
 class PauseablePlacement {
-  constructor(transform, order, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions) {
+  constructor(transform, maxIndex, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions) {
     this.placement = new Placement(transform, fadeDuration, crossSourceCollisions);
-    this._currentPlacementIndex = order.length - 1;
+    this._currentPlacementIndex = maxIndex;
     this._forceFullPlacement = forceFullPlacement;
     this._showCollisionBoxes = showCollisionBoxes;
     this._done = false;
@@ -34,7 +34,7 @@ class PauseablePlacement {
     return this._done;
   }
 
-  continuePlacement(order, layers, layerTiles) {
+  continuePlacement(layers, layerTiles) {
     const startTime = browser.now();
 
     const shouldPausePlacement = () => {
@@ -43,8 +43,7 @@ class PauseablePlacement {
     };
 
     while (this._currentPlacementIndex >= 0) {
-      const layerId = order[this._currentPlacementIndex];
-      const layer = layers[layerId];
+      const layer = layers[this._currentPlacementIndex];
       const placementZoom = this.placement.collisionIndex.transform.zoom;
       if (
         layer.type === 'symbol' &&

package/src/style/properties.js

@@ -3,7 +3,6 @@ const assert = require('assert');
 const { clone } = require('../util/object');
 const { easeCubicInOut } = require('../util/util');
 const { interpolate, normalizePropertyExpression } = require('@mapwhit/style-expressions');
-const { register } = require('../util/transfer_registry');
 const EvaluationParameters = require('./evaluation_parameters');
 
 /**
@@ -407,7 +406,7 @@ class PossiblyEvaluatedPropertyValue {
  * in a way that allows flow to know which of these two cases applies for any given property name, and if you attempt
  * to use a `PossiblyEvaluatedPropertyValue` as if it was a scalar, or vice versa, you will get a type error. (However,
  * there's at least one case in which flow fails to produce a type error that you should be aware of: in a context such
- * as `layer.paint.get('foo-opacity') === 0`, if `foo-opacity` is data-driven, than the left-hand side is of type
+ * as `layer._paint.get('foo-opacity') === 0`, if `foo-opacity` is data-driven, than the left-hand side is of type
  * `PossiblyEvaluatedPropertyValue<number>`, but flow will not complain about comparing this to a number using `===`.
  * See https://github.com/facebook/flow/issues/2359.)
  *
@@ -672,12 +671,6 @@ class Properties {
   }
 }
 
-register('DataDrivenProperty', DataDrivenProperty);
-register('DataConstantProperty', DataConstantProperty);
-register('CrossFadedDataDrivenProperty', CrossFadedDataDrivenProperty);
-register('CrossFadedProperty', CrossFadedProperty);
-register('ColorRampProperty', ColorRampProperty);
-
 module.exports = {
   PropertyValue,
   Transitionable,

package/src/style/query_utils.js

@@ -7,7 +7,7 @@ module.exports = {
 };
 
 function getMaximumPaintValue(property, layer, bucket) {
-  const value = layer.paint.get(property).value;
+  const value = layer._paint.get(property).value;
   if (value.kind === 'constant') {
     return value.value;
   }
@@ -24,7 +24,7 @@ function translate(queryGeometry, translate, translateAnchor, bearing, pixelsToT
     return queryGeometry;
   }
 
-  const pt = Point.convert(translate);
+  const pt = Point.convert(translate)._mult(pixelsToTileUnits);
 
   if (translateAnchor === 'viewport') {
     pt._rotate(-bearing);
@@ -33,7 +33,7 @@ function translate(queryGeometry, translate, translateAnchor, bearing, pixelsToT
   const translated = [];
   for (let i = 0; i < queryGeometry.length; i++) {
     const point = queryGeometry[i];
-    translated.push(point.sub(pt._mult(pixelsToTileUnits)));
+    translated.push(point.sub(pt));
   }
   return translated;
 }