@mapwhit/tilerenderer 0.47.1

package/src/source/geojson_source.js

@@ -0,0 +1,267 @@
+const { Event, ErrorEvent, Evented } = require('../util/evented');
+
+const EXTENT = require('../data/extent');
+const browser = require('../util/browser');
+
+/**
+ * A source containing GeoJSON.
+ * (See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-geojson) for detailed documentation of options.)
+ *
+ * @example
+ * map.addSource('some id', {
+ *     type: 'geojson',
+ *     data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
+ * });
+ *
+ * @example
+ * map.addSource('some id', {
+ *    type: 'geojson',
+ *    data: {
+ *        "type": "FeatureCollection",
+ *        "features": [{
+ *            "type": "Feature",
+ *            "properties": {},
+ *            "geometry": {
+ *                "type": "Point",
+ *                "coordinates": [
+ *                    -76.53063297271729,
+ *                    39.18174077994108
+ *                ]
+ *            }
+ *        }]
+ *    }
+ * });
+ *
+ * @example
+ * map.getSource('some id').setData({
+ *   "type": "FeatureCollection",
+ *   "features": [{
+ *       "type": "Feature",
+ *       "properties": { "name": "Null Island" },
+ *       "geometry": {
+ *           "type": "Point",
+ *           "coordinates": [ 0, 0 ]
+ *       }
+ *   }]
+ * });
+ * @see [Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/)
+ * @see [Add a GeoJSON line](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/)
+ * @see [Create a heatmap from points](https://www.mapbox.com/mapbox-gl-js/example/heatmap/)
+ */
+class GeoJSONSource extends Evented {
+  /**
+   * @private
+   */
+  constructor(id, options, dispatcher, eventedParent) {
+    super();
+
+    this.id = id;
+
+    // `type` is a property rather than a constant to make it easy for 3rd
+    // parties to use GeoJSONSource to build their own source types.
+    this.type = 'geojson';
+
+    this.minzoom = 0;
+    this.maxzoom = 18;
+    this.tileSize = 512;
+    this.isTileClipped = true;
+    this.reparseOverscaled = true;
+    this._removed = false;
+
+    this.dispatcher = dispatcher;
+    this.setEventedParent(eventedParent);
+
+    this._data = options.data;
+    this._options = Object.assign({}, options);
+
+    if (options.maxzoom !== undefined) this.maxzoom = options.maxzoom;
+    if (options.type) this.type = options.type;
+
+    const scale = EXTENT / this.tileSize;
+
+    // sent to the worker, along with `url: ...` or `data: literal geojson`,
+    // so that it can load/parse/index the geojson data
+    // extending with `options.workerOptions` helps to make it easy for
+    // third-party sources to hack/reuse GeoJSONSource.
+    this.workerOptions = Object.assign(
+      {
+        source: this.id,
+        cluster: options.cluster || false,
+        geojsonVtOptions: {
+          buffer: (options.buffer !== undefined ? options.buffer : 128) * scale,
+          tolerance: (options.tolerance !== undefined ? options.tolerance : 0.375) * scale,
+          extent: EXTENT,
+          maxZoom: this.maxzoom,
+          lineMetrics: options.lineMetrics || false
+        },
+        superclusterOptions: {
+          maxZoom:
+            options.clusterMaxZoom !== undefined
+              ? Math.min(options.clusterMaxZoom, this.maxzoom - 1)
+              : this.maxzoom - 1,
+          extent: EXTENT,
+          radius: (options.clusterRadius || 50) * scale,
+          log: false
+        }
+      },
+      options.workerOptions
+    );
+  }
+
+  load() {
+    this.fire(new Event('dataloading', { dataType: 'source' }));
+    this._updateWorkerData(err => {
+      if (err) {
+        this.fire(new ErrorEvent(err));
+        return;
+      }
+
+      const data = { dataType: 'source', sourceDataType: 'metadata' };
+
+      // although GeoJSON sources contain no metadata, we fire this event to let the SourceCache
+      // know its ok to start requesting tiles.
+      this.fire(new Event('data', data));
+    });
+  }
+
+  onAdd(map) {
+    this.map = map;
+    this.load();
+  }
+
+  /**
+   * Sets the GeoJSON data and re-renders the map.
+   *
+   * @param {Object|string} data A GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files.
+   * @returns {GeoJSONSource} this
+   */
+  setData(data) {
+    this._data = data;
+    this.fire(new Event('dataloading', { dataType: 'source' }));
+    this._updateWorkerData(err => {
+      if (err) {
+        return this.fire(new ErrorEvent(err));
+      }
+
+      const data = { dataType: 'source', sourceDataType: 'content' };
+      this.fire(new Event('data', data));
+    });
+
+    return this;
+  }
+
+  /*
+   * Responsible for invoking WorkerSource's geojson.loadData target, which
+   * handles loading the geojson data and preparing to serve it up as tiles,
+   * using geojson-vt or supercluster as appropriate.
+   */
+  _updateWorkerData(callback) {
+    // biome-ignore lint/suspicious/useAwait: normalize return values as promises
+    async function loadGeoJSON(data) {
+      if (typeof data === 'function') {
+        return data();
+      }
+      return data;
+    }
+
+    const data = this._data;
+    loadGeoJSON(data)
+      .catch(() => {})
+      .then(json => {
+        if (!json) {
+          return callback(new Error('no GeoJSON data'));
+        }
+        const options = Object.assign({}, this.workerOptions);
+        options.data = JSON.stringify(json);
+        // target {this.type}.loadData rather than literally geojson.loadData,
+        // so that other geojson-like source types can easily reuse this
+        // implementation
+        this.workerID = this.dispatcher.send(
+          `${this.type}.loadData`,
+          options,
+          (err, result) => {
+            if (this._removed || result?.abandoned) {
+              return;
+            }
+
+            this._loaded = true;
+
+            if (result?.resourceTiming?.[this.id]) this._resourceTiming = result.resourceTiming[this.id].slice(0);
+            // Any `loadData` calls that piled up while we were processing
+            // this one will get coalesced into a single call when this
+            // 'coalesce' message is processed.
+            // We would self-send from the worker if we had access to its
+            // message queue. Waiting instead for the 'coalesce' to round-trip
+            // through the foreground just means we're throttling the worker
+            // to run at a little less than full-throttle.
+            this.dispatcher.send(`${this.type}.coalesce`, { source: options.source }, null, this.workerID);
+            callback(err);
+          },
+          this.workerID
+        );
+      });
+  }
+
+  loadTile(tile, callback) {
+    const message = tile.workerID === undefined ? 'loadTile' : 'reloadTile';
+    const params = {
+      type: this.type,
+      uid: tile.uid,
+      tileID: tile.tileID,
+      zoom: tile.tileID.overscaledZ,
+      maxZoom: this.maxzoom,
+      tileSize: this.tileSize,
+      source: this.id,
+      pixelRatio: browser.devicePixelRatio,
+      showCollisionBoxes: this.map.showCollisionBoxes
+    };
+
+    tile.workerID = this.dispatcher.send(
+      message,
+      params,
+      (err, data) => {
+        tile.unloadVectorData();
+
+        if (tile.aborted) {
+          return callback(null);
+        }
+
+        if (err) {
+          return callback(err);
+        }
+
+        tile.loadVectorData(data, this.map.painter, message === 'reloadTile');
+
+        return callback(null);
+      },
+      this.workerID
+    );
+  }
+
+  abortTile(tile) {
+    tile.aborted = true;
+  }
+
+  unloadTile(tile) {
+    tile.unloadVectorData();
+    this.dispatcher.send('removeTile', { uid: tile.uid, type: this.type, source: this.id }, null, tile.workerID);
+  }
+
+  onRemove() {
+    this._removed = true;
+    this.dispatcher.send('removeSource', { type: this.type, source: this.id }, null, this.workerID);
+  }
+
+  serialize() {
+    return Object.assign({}, this._options, {
+      type: this.type,
+      data: this._data
+    });
+  }
+
+  hasTransition() {
+    return false;
+  }
+}
+
+module.exports = GeoJSONSource;

package/src/source/geojson_worker_source.js

@@ -0,0 +1,210 @@
+const rewind = require('@mapwhit/geojson-rewind');
+const GeoJSONWrapper = require('./geojson_wrapper');
+const vtpbf = require('@mapwhit/vt-pbf');
+const supercluster = require('supercluster');
+const geojsonvt = require('geojson-vt');
+const assert = require('assert');
+const VectorTileWorkerSource = require('./vector_tile_worker_source');
+
+function loadGeoJSONTile(params, callback) {
+  const canonical = params.tileID.canonical;
+
+  if (!this._geoJSONIndex) {
+    return callback(null, null); // we couldn't load the file
+  }
+
+  const geoJSONTile = this._geoJSONIndex.getTile(canonical.z, canonical.x, canonical.y);
+  if (!geoJSONTile) {
+    return callback(null, null); // nothing in the given tile
+  }
+
+  const geojsonWrapper = new GeoJSONWrapper(geoJSONTile.features);
+
+  // Encode the geojson-vt tile into binary vector tile form.  This
+  // is a convenience that allows `FeatureIndex` to operate the same way
+  // across `VectorTileSource` and `GeoJSONSource` data.
+  let pbf = vtpbf(geojsonWrapper);
+  if (pbf.byteOffset !== 0 || pbf.byteLength !== pbf.buffer.byteLength) {
+    // Compatibility with node Buffer (https://github.com/mapbox/pbf/issues/35)
+    pbf = new Uint8Array(pbf);
+  }
+
+  callback(null, {
+    vectorTile: geojsonWrapper,
+    rawData: pbf.buffer
+  });
+}
+
+// 'loadData' received while coalescing, trigger one more 'loadData' on receiving 'coalesced'
+
+/**
+ * The {@link WorkerSource} implementation that supports {@link GeoJSONSource}.
+ * 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 GeoJSON
+ * representation.  To do so, create it with
+ * `new GeoJSONWorkerSource(actor, layerIndex, customLoadGeoJSONFunction)`.
+ * For a full example, see [mapbox-gl-topojson](https://github.com/developmentseed/mapbox-gl-topojson).
+ *
+ * @private
+ */
+class GeoJSONWorkerSource extends VectorTileWorkerSource {
+  /**
+   * @param [loadGeoJSON] Optional method for custom loading/parsing of
+   * GeoJSON based on parameters passed from the main-thread Source.
+   * See {@link GeoJSONWorkerSource#loadGeoJSON}.
+   */
+  constructor(actor, layerIndex, loadGeoJSON) {
+    super(actor, layerIndex, loadGeoJSONTile);
+    if (loadGeoJSON) {
+      this.loadGeoJSON = loadGeoJSON;
+    }
+  }
+
+  /**
+   * 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.
+   *
+   * When `loadData` requests come in faster than they can be processed,
+   * they are coalesced into a single request using the latest data.
+   * See {@link GeoJSONWorkerSource#coalesce}
+   *
+   * @param params
+   * @param callback
+   */
+  loadData(params, callback) {
+    if (this._pendingCallback) {
+      // Tell the foreground the previous call has been abandoned
+      this._pendingCallback(null, { abandoned: true });
+    }
+    this._pendingCallback = callback;
+    this._pendingLoadDataParams = params;
+
+    if (this._state && this._state !== 'Idle') {
+      this._state = 'NeedsLoadData';
+    } else {
+      this._state = 'Coalescing';
+      this._loadData();
+    }
+  }
+
+  /**
+   * Internal implementation: called directly by `loadData`
+   * or by `coalesce` using stored parameters.
+   */
+  _loadData() {
+    if (!this._pendingCallback || !this._pendingLoadDataParams) {
+      assert(false);
+      return;
+    }
+    const callback = this._pendingCallback;
+    const params = this._pendingLoadDataParams;
+    delete this._pendingCallback;
+    delete this._pendingLoadDataParams;
+    this.loadGeoJSON(params, (err, data) => {
+      if (err || !data) {
+        return callback(err);
+      }
+      if (typeof data !== 'object') {
+        return callback(new Error('Input data is not a valid GeoJSON object.'));
+      }
+      rewind(data, true);
+
+      try {
+        this._geoJSONIndex = params.cluster
+          ? supercluster(params.superclusterOptions).load(data.features)
+          : geojsonvt(data, params.geojsonVtOptions);
+      } catch (err) {
+        return callback(err);
+      }
+
+      this.loaded = {};
+
+      const result = {};
+      callback(null, result);
+    });
+  }
+
+  /**
+   * While processing `loadData`, we coalesce all further
+   * `loadData` messages into a single call to _loadData
+   * that will happen once we've finished processing the
+   * first message. {@link GeoJSONSource#_updateWorkerData}
+   * is responsible for sending us the `coalesce` message
+   * at the time it receives a response from `loadData`
+   *
+   *          State: Idle
+   *          ↑          |
+   *     'coalesce'   'loadData'
+   *          |     (triggers load)
+   *          |          ↓
+   *        State: Coalescing
+   *          ↑          |
+   *   (triggers load)   |
+   *     'coalesce'   'loadData'
+   *          |          ↓
+   *        State: NeedsLoadData
+   */
+  coalesce() {
+    if (this._state === 'Coalescing') {
+      this._state = 'Idle';
+    } else if (this._state === 'NeedsLoadData') {
+      this._state = 'Coalescing';
+      this._loadData();
+    }
+  }
+
+  /**
+   * Implements {@link WorkerSource#reloadTile}.
+   *
+   * If the tile is loaded, uses the implementation in VectorTileWorkerSource.
+   * Otherwise, such as after a setData() call, we load the tile fresh.
+   *
+   * @param params
+   * @param params.uid The UID for this tile.
+   */
+  reloadTile(params, callback) {
+    const loaded = this.loaded;
+    const uid = params.uid;
+
+    if (loaded?.[uid]) {
+      return super.reloadTile(params, callback);
+    }
+    return this.loadTile(params, callback);
+  }
+
+  /**
+   * Fetch and parse GeoJSON according to the given params.  Calls `callback`
+   * with `(err, data)`, where `data` is a parsed GeoJSON object.
+   *
+   * GeoJSON is expected as a literal (string or object) `params.data`.
+   *
+   * @param params
+   * @param [params.data] Literal GeoJSON data. Must be provided.
+   */
+  loadGeoJSON(params, callback) {
+    if (typeof params.data === 'string') {
+      try {
+        return callback(null, JSON.parse(params.data));
+      } catch (e) {
+        return callback(new Error('Input data is not a valid GeoJSON object.'));
+      }
+    } else {
+      return callback(new Error('Input data is not a valid GeoJSON object.'));
+    }
+  }
+
+  removeSource(params, callback) {
+    if (this._pendingCallback) {
+      // Don't leak callbacks
+      this._pendingCallback(null, { abandoned: true });
+    }
+    callback();
+  }
+}
+
+module.exports = GeoJSONWorkerSource;

package/src/source/geojson_wrapper.js

@@ -0,0 +1,67 @@
+const Point = require('@mapbox/point-geometry');
+
+const mvt = require('@mapbox/vector-tile');
+const toGeoJSON = mvt.VectorTileFeature.prototype.toGeoJSON;
+const EXTENT = require('../data/extent');
+
+// The feature type used by geojson-vt and supercluster. Should be extracted to
+// global type and used in module definitions for those two modules.
+
+class FeatureWrapper {
+  constructor(feature) {
+    this._feature = feature;
+
+    this.extent = EXTENT;
+    this.type = feature.type;
+    this.properties = feature.tags;
+
+    // If the feature has a top-level `id` property, copy it over, but only
+    // if it can be coerced to an integer, because this wrapper is used for
+    // serializing geojson feature data into vector tile PBF data, and the
+    // vector tile spec only supports integer values for feature ids --
+    // allowing non-integer values here results in a non-compliant PBF
+    // that causes an exception when it is parsed with vector-tile-js
+    if ('id' in feature && !isNaN(feature.id)) {
+      this.id = Number.parseInt(feature.id, 10);
+    }
+  }
+
+  loadGeometry() {
+    if (this._feature.type === 1) {
+      const geometry = [];
+      for (const point of this._feature.geometry) {
+        geometry.push([new Point(point[0], point[1])]);
+      }
+      return geometry;
+    }
+    const geometry = [];
+    for (const ring of this._feature.geometry) {
+      const newRing = [];
+      for (const point of ring) {
+        newRing.push(new Point(point[0], point[1]));
+      }
+      geometry.push(newRing);
+    }
+    return geometry;
+  }
+
+  toGeoJSON(x, y, z) {
+    return toGeoJSON.call(this, x, y, z);
+  }
+}
+
+class GeoJSONWrapper {
+  constructor(features) {
+    this.layers = { _geojsonTileLayer: this };
+    this.name = '_geojsonTileLayer';
+    this.extent = EXTENT;
+    this.length = features.length;
+    this._features = features;
+  }
+
+  feature(i) {
+    return new FeatureWrapper(this._features[i]);
+  }
+}
+
+module.exports = GeoJSONWrapper;