@mapwhit/tilerenderer 0.47.1

package/src/source/vector_tile_source.js

@@ -0,0 +1,144 @@
+const config = require('../util/config');
+const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { pick } = require('../util/object');
+const loadTileJSON = require('./load_tilejson');
+const TileBounds = require('./tile_bounds');
+const browser = require('../util/browser');
+
+// register feature index for worker transfer
+require('../data/feature_index');
+
+class VectorTileSource extends Evented {
+  constructor(id, options, dispatcher, eventedParent) {
+    super();
+    this.id = id;
+    this.dispatcher = dispatcher;
+
+    this.type = 'vector';
+    this.minzoom = 0;
+    this.maxzoom = 22;
+    this.scheme = 'xyz';
+    this.tileSize = 512;
+    this.reparseOverscaled = true;
+    this.isTileClipped = true;
+
+    Object.assign(this, pick(options, ['url', 'scheme', 'tileSize']));
+    this._options = Object.assign({ type: 'vector' }, options);
+
+    if (this.tileSize !== 512) {
+      throw new Error('vector tile sources must have a tileSize of 512');
+    }
+
+    this.updateWorkerConfig(config);
+    config.on('change', c => this.updateWorkerConfig(c));
+
+    this.setEventedParent(eventedParent);
+  }
+
+  load() {
+    this.fire(new Event('dataloading', { dataType: 'source' }));
+
+    loadTileJSON(this._options, (err, tileJSON) => {
+      if (err) {
+        this.fire(new ErrorEvent(err));
+      } else if (tileJSON) {
+        Object.assign(this, tileJSON);
+        if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
+
+        // `content` is included here to prevent a race condition where `Style#_updateSources` is called
+        // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
+        // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
+        this.fire(new Event('data', { dataType: 'source', sourceDataType: 'metadata' }));
+        this.fire(new Event('data', { dataType: 'source', sourceDataType: 'content' }));
+      }
+    });
+  }
+
+  hasTile(tileID) {
+    return !this.tileBounds || this.tileBounds.contains(tileID.canonical);
+  }
+
+  onAdd(map) {
+    this.map = map;
+    this.load();
+  }
+
+  serialize() {
+    return Object.assign({}, this._options);
+  }
+
+  loadTile(tile, callback) {
+    tile.abortController = new window.AbortController();
+    this.tiles(tile.tileID.canonical, tile.abortController)
+      .catch(() => {})
+      .then(data => {
+        if (!data) {
+          const err = new Error('Tile could not be loaded');
+          err.status = 404; // will try to use the parent/child tile
+          return done(err);
+        }
+        const params = {
+          response: { data },
+          uid: tile.uid,
+          tileID: tile.tileID,
+          zoom: tile.tileID.overscaledZ,
+          tileSize: this.tileSize * tile.tileID.overscaleFactor(),
+          type: this.type,
+          source: this.id,
+          pixelRatio: browser.devicePixelRatio,
+          showCollisionBoxes: this.map.showCollisionBoxes
+        };
+
+        if (tile.workerID === undefined || tile.state === 'expired') {
+          tile.workerID = this.dispatcher.send('loadTile', params, done.bind(this));
+        } else if (tile.state === 'loading') {
+          // schedule tile reloading after it has been loaded
+          tile.reloadCallback = callback;
+        } else {
+          this.dispatcher.send('reloadTile', params, done.bind(this), tile.workerID);
+        }
+      });
+
+    function done(err, data) {
+      if (tile.aborted) return callback(null);
+
+      if (err) {
+        return callback(err);
+      }
+
+      if (data?.resourceTiming) tile.resourceTiming = data.resourceTiming;
+
+      tile.loadVectorData(data, this.map.painter);
+
+      callback(null);
+
+      if (tile.reloadCallback) {
+        this.loadTile(tile, tile.reloadCallback);
+        tile.reloadCallback = null;
+      }
+    }
+  }
+
+  abortTile(tile) {
+    tile.aborted = true;
+    tile.abortController.abort();
+    this.dispatcher.send('abortTile', { uid: tile.uid, type: this.type, source: this.id }, undefined, tile.workerID);
+  }
+
+  unloadTile(tile) {
+    tile.unloadVectorData();
+    this.dispatcher.send('removeTile', { uid: tile.uid, type: this.type, source: this.id }, undefined, tile.workerID);
+  }
+
+  hasTransition() {
+    return false;
+  }
+
+  updateWorkerConfig() {
+    this.dispatcher.broadcast('vector.updateConfig', {
+      source: this.id
+    });
+  }
+}
+
+module.exports = VectorTileSource;

package/src/source/vector_tile_worker_source.js

@@ -0,0 +1,126 @@
+const vt = require('@mapbox/vector-tile');
+const Protobuf = require('@mapwhit/pbf');
+const WorkerTile = require('./worker_tile');
+
+function loadVectorTile(params, callback) {
+  if (!params.response) {
+    return callback(new Error('no tile data'));
+  }
+  const { data } = params.response;
+  if (!data) {
+    return callback();
+  }
+  callback(null, {
+    vectorTile: new vt.VectorTile(new Protobuf(data)),
+    rawData: data
+  });
+}
+
+/**
+ * The {@link WorkerSource} implementation that supports {@link VectorTileSource}.
+ * This class is designed to be easily reused to support custom source types
+ * for data formats that can be parsed/converted into an in-memory VectorTile
+ * representation.  To do so, create it with
+ * `new VectorTileWorkerSource(actor, styleLayers, customLoadVectorDataFunction)`.
+ *
+ * @private
+ */
+class VectorTileWorkerSource {
+  /**
+   * @param [loadVectorData] Optional method for custom loading of a VectorTile
+   * object based on parameters passed from the main-thread Source. See
+   * {@link VectorTileWorkerSource#loadTile}. The default implementation simply
+   * loads the pbf at `params.url`.
+   */
+  constructor(actor, layerIndex, loadVectorData) {
+    this.actor = actor;
+    this.layerIndex = layerIndex;
+    this.loadVectorData = loadVectorData || loadVectorTile.bind(this);
+    this.loaded = {};
+  }
+
+  /**
+   * Implements {@link WorkerSource#loadTile}. Delegates to
+   * {@link VectorTileWorkerSource#loadVectorData} (which by default expects
+   * a `params.url` property) for fetching and producing a VectorTile object.
+   */
+  loadTile(params, callback) {
+    const uid = params.uid;
+
+    const workerTile = new WorkerTile(params);
+    this.loadVectorData(params, (err, response) => {
+      if (err || !response) {
+        return callback(err);
+      }
+
+      const rawTileData = response.rawData;
+      workerTile.vectorTile = response.vectorTile;
+      workerTile.parse(response.vectorTile, this.layerIndex, this.actor, (err, result) => {
+        if (err || !result) return callback(err);
+
+        // Transferring a copy of rawTileData because the worker needs to retain its copy.
+        callback(null, Object.assign({ rawTileData: rawTileData.slice(0) }, result));
+      });
+
+      this.loaded = this.loaded || {};
+      this.loaded[uid] = workerTile;
+    });
+  }
+
+  /**
+   * Implements {@link WorkerSource#reloadTile}.
+   */
+  reloadTile(params, callback) {
+    const loaded = this.loaded;
+    const uid = params.uid;
+    const vtSource = this;
+    if (loaded?.[uid]) {
+      const workerTile = loaded[uid];
+      workerTile.showCollisionBoxes = params.showCollisionBoxes;
+
+      const done = (err, data) => {
+        const reloadCallback = workerTile.reloadCallback;
+        if (reloadCallback) {
+          delete workerTile.reloadCallback;
+          workerTile.parse(workerTile.vectorTile, vtSource.layerIndex, vtSource.actor, reloadCallback);
+        }
+        callback(err, data);
+      };
+
+      if (workerTile.status === 'parsing') {
+        workerTile.reloadCallback = done;
+      } else if (workerTile.status === 'done') {
+        workerTile.parse(workerTile.vectorTile, this.layerIndex, this.actor, done);
+      }
+    }
+  }
+
+  /**
+   * Implements {@link WorkerSource#abortTile}.
+   *
+   * @param params
+   * @param params.uid The UID for this tile.
+   */
+  abortTile(params, callback) {
+    callback();
+  }
+
+  /**
+   * Implements {@link WorkerSource#removeTile}.
+   *
+   * @param params
+   * @param params.uid The UID for this tile.
+   */
+  removeTile(params, callback) {
+    const loaded = this.loaded;
+    const uid = params.uid;
+    if (loaded?.[uid]) {
+      delete loaded[uid];
+    }
+    callback();
+  }
+
+  updateConfig() {}
+}
+
+module.exports = VectorTileWorkerSource;

package/src/source/worker.js

@@ -0,0 +1,175 @@
+const Actor = require('../util/actor');
+
+const StyleLayerIndex = require('../style/style_layer_index');
+const VectorTileWorkerSource = require('./vector_tile_worker_source');
+const RasterDEMTileWorkerSource = require('./raster_dem_tile_worker_source');
+const GeoJSONWorkerSource = require('./geojson_worker_source');
+const assert = require('assert');
+const { plugin: globalRTLTextPlugin } = require('./rtl_text_plugin');
+
+/**
+ * @private
+ */
+class Worker {
+  constructor(self) {
+    this.self = self;
+    this.actor = new Actor(self, this);
+
+    this.layerIndexes = {};
+
+    this.workerSourceTypes = {
+      vector: VectorTileWorkerSource,
+      geojson: GeoJSONWorkerSource
+    };
+
+    // [mapId][sourceType][sourceName] => worker source instance
+    this.workerSources = {};
+    this.demWorkerSources = {};
+
+    this.self.registerWorkerSource = (name, WorkerSource) => {
+      if (this.workerSourceTypes[name]) {
+        throw new Error(`Worker source with name "${name}" already registered.`);
+      }
+      this.workerSourceTypes[name] = WorkerSource;
+    };
+
+    this.self.registerRTLTextPlugin = rtlTextPlugin => {
+      if (globalRTLTextPlugin.isLoaded()) {
+        throw new Error('RTL text plugin already registered.');
+      }
+      globalRTLTextPlugin['applyArabicShaping'] = rtlTextPlugin.applyArabicShaping;
+      globalRTLTextPlugin['processBidirectionalText'] = rtlTextPlugin.processBidirectionalText;
+    };
+  }
+
+  setLayers(mapId, layers, callback) {
+    this.getLayerIndex(mapId).replace(layers);
+    callback();
+  }
+
+  updateLayers(mapId, params, callback) {
+    this.getLayerIndex(mapId).update(params.layers, params.removedIds);
+    callback();
+  }
+
+  loadTile(mapId, params, callback) {
+    assert(params.type);
+    this.getWorkerSource(mapId, params.type, params.source).loadTile(params, callback);
+  }
+
+  loadDEMTile(mapId, params, callback) {
+    this.getDEMWorkerSource(mapId, params.source).loadTile(params, callback);
+  }
+
+  reloadTile(mapId, params, callback) {
+    assert(params.type);
+    this.getWorkerSource(mapId, params.type, params.source).reloadTile(params, callback);
+  }
+
+  abortTile(mapId, params, callback) {
+    assert(params.type);
+    this.getWorkerSource(mapId, params.type, params.source).abortTile(params, callback);
+  }
+
+  removeTile(mapId, params, callback) {
+    assert(params.type);
+    this.getWorkerSource(mapId, params.type, params.source).removeTile(params, callback);
+  }
+
+  removeDEMTile(mapId, params) {
+    this.getDEMWorkerSource(mapId, params.source).removeTile(params);
+  }
+
+  removeSource(mapId, params, callback) {
+    assert(params.type);
+    assert(params.source);
+
+    if (
+      !this.workerSources[mapId] ||
+      !this.workerSources[mapId][params.type] ||
+      !this.workerSources[mapId][params.type][params.source]
+    ) {
+      return;
+    }
+
+    const worker = this.workerSources[mapId][params.type][params.source];
+    delete this.workerSources[mapId][params.type][params.source];
+
+    if (worker.removeSource !== undefined) {
+      worker.removeSource(params, callback);
+    } else {
+      callback();
+    }
+  }
+
+  /**
+   * Load a {@link WorkerSource} script at params.url.  The script is run
+   * (using importScripts) with `registerWorkerSource` in scope, which is a
+   * function taking `(name, workerSourceObject)`.
+   *  @private
+   */
+  loadWorkerSource(map, params, callback) {
+    try {
+      this.self.importScripts(params.url);
+      callback();
+    } catch (e) {
+      callback(e.toString());
+    }
+  }
+
+  loadRTLTextPlugin(map, pluginURL, callback) {
+    try {
+      if (!globalRTLTextPlugin.isLoaded()) {
+        this.self.importScripts(pluginURL);
+        callback(
+          globalRTLTextPlugin.isLoaded()
+            ? null
+            : new Error(`RTL Text Plugin failed to import scripts from ${pluginURL}`)
+        );
+      }
+    } catch (e) {
+      callback(e.toString());
+    }
+  }
+
+  getLayerIndex(mapId) {
+    let layerIndexes = this.layerIndexes[mapId];
+    if (!layerIndexes) {
+      layerIndexes = this.layerIndexes[mapId] = new StyleLayerIndex();
+    }
+    return layerIndexes;
+  }
+
+  getWorkerSource(mapId, type, source) {
+    if (!this.workerSources[mapId]) this.workerSources[mapId] = {};
+    if (!this.workerSources[mapId][type]) this.workerSources[mapId][type] = {};
+
+    if (!this.workerSources[mapId][type][source]) {
+      // use a wrapped actor so that we can attach a target mapId param
+      // to any messages invoked by the WorkerSource
+      const actor = {
+        send: (type, data, callback) => {
+          this.actor.send(type, data, callback, mapId);
+        }
+      };
+
+      this.workerSources[mapId][type][source] = new this.workerSourceTypes[type](actor, this.getLayerIndex(mapId));
+    }
+
+    return this.workerSources[mapId][type][source];
+  }
+
+  getDEMWorkerSource(mapId, source) {
+    if (!this.demWorkerSources[mapId]) this.demWorkerSources[mapId] = {};
+
+    if (!this.demWorkerSources[mapId][source]) {
+      this.demWorkerSources[mapId][source] = new RasterDEMTileWorkerSource();
+    }
+
+    return this.demWorkerSources[mapId][source];
+  }
+}
+
+module.exports = function createWorker(self) {
+  return new Worker(self);
+};

package/src/source/worker_source.js

@@ -0,0 +1,14 @@
+/**
+ * May be implemented by custom source types to provide code that can be run on
+ * the WebWorkers. In addition to providing a custom
+ * {@link WorkerSource#loadTile}, any other methods attached to a `WorkerSource`
+ * implementation may also be targeted by the {@link Source} via
+ * `dispatcher.send('source-type.methodname', params, callback)`.
+ *
+ * @see {@link Map#addSourceType}
+ * @private
+ *
+ * @class WorkerSource
+ * @param actor
+ * @param layerIndex
+ */

package/src/source/worker_tile.js

@@ -0,0 +1,199 @@
+const FeatureIndex = require('../data/feature_index');
+
+const { performSymbolLayout } = require('../symbol/symbol_layout');
+const { CollisionBoxArray } = require('../data/array_types');
+const DictionaryCoder = require('../util/dictionary_coder');
+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 warn = require('../util/warn');
+const assert = require('assert');
+const ImageAtlas = require('../render/image_atlas');
+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;
+  }
+
+  parse(data, layerIndex, actor, callback) {
+    this.status = 'parsing';
+    this.data = data;
+
+    this.collisionBoxArray = new CollisionBoxArray();
+    const sourceLayerCoder = new DictionaryCoder(Object.keys(data.layers).sort());
+
+    const featureIndex = new FeatureIndex(this.tileID);
+    featureIndex.bucketLayerIDs = [];
+
+    const buckets = {};
+
+    const options = {
+      featureIndex,
+      iconDependencies: {},
+      patternDependencies: {},
+      glyphDependencies: {}
+    };
+
+    const layerFamilies = layerIndex.familiesBySource[this.source];
+    for (const sourceLayerId in layerFamilies) {
+      const sourceLayer = data.layers[sourceLayerId];
+      if (!sourceLayer) {
+        continue;
+      }
+
+      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 sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
+      const features = [];
+      for (let index = 0; index < sourceLayer.length; index++) {
+        const feature = sourceLayer.feature(index);
+        features.push({ feature, 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);
+
+        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
+        }));
+
+        bucket.populate(features, options);
+        featureIndex.bucketLayerIDs.push(family.map(l => l.id));
+      }
+    }
+
+    let error;
+    let glyphMap;
+    let iconMap;
+    let patternMap;
+
+    const stacks = mapObject(options.glyphDependencies, glyphs => Object.keys(glyphs).map(Number));
+    if (Object.keys(stacks).length) {
+      actor.send('getGlyphs', { uid: this.uid, stacks }, (err, result) => {
+        if (!error) {
+          error = err;
+          glyphMap = result;
+          maybePrepare.call(this);
+        }
+      });
+    } else {
+      glyphMap = {};
+    }
+
+    const icons = Object.keys(options.iconDependencies);
+    if (icons.length) {
+      actor.send('getImages', { icons }, (err, result) => {
+        if (!error) {
+          error = err;
+          iconMap = result;
+          maybePrepare.call(this);
+        }
+      });
+    } else {
+      iconMap = {};
+    }
+
+    const patterns = Object.keys(options.patternDependencies);
+    if (patterns.length) {
+      actor.send('getImages', { icons: patterns }, (err, result) => {
+        if (!error) {
+          error = err;
+          patternMap = result;
+          maybePrepare.call(this);
+        }
+      });
+    } else {
+      patternMap = {};
+    }
+
+    maybePrepare.call(this);
+
+    function maybePrepare() {
+      if (error) {
+        return callback(error);
+      }
+      if (glyphMap && iconMap && patternMap) {
+        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);
+            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);
+            bucket.addFeatures(options, imageAtlas.patternPositions);
+          }
+        }
+
+        this.status = 'done';
+
+        callback(null, {
+          buckets: values(buckets).filter(b => !b.isEmpty()),
+          featureIndex,
+          collisionBoxArray: this.collisionBoxArray,
+          glyphAtlasImage: glyphAtlas.image,
+          imageAtlas
+        });
+      }
+    }
+  }
+}
+
+function recalculateLayers(layers, zoom) {
+  // Layers are shared and may have been used by a WorkerTile with a different zoom.
+  const parameters = new EvaluationParameters(zoom);
+  for (const layer of layers) {
+    layer.recalculate(parameters);
+  }
+}
+
+module.exports = WorkerTile;

package/src/style/create_style_layer.js

@@ -0,0 +1,25 @@
+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 line = require('./style_layer/line_style_layer');
+const symbol = require('./style_layer/symbol_style_layer');
+const background = require('./style_layer/background_style_layer');
+const raster = require('./style_layer/raster_style_layer');
+
+const subclasses = {
+  circle,
+  heatmap,
+  hillshade,
+  fill,
+  'fill-extrusion': fillExtrusion,
+  line,
+  symbol,
+  background,
+  raster
+};
+
+module.exports = function createStyleLayer(layer) {
+  return new subclasses[layer.type](layer);
+};