@mapwhit/tilerenderer 0.52.0 → 1.0.0

package/src/style/style.js

@@ -9,58 +9,69 @@ const Light = require('./light');
 const LineAtlas = require('../render/line_atlas');
 const { clone, deepEqual, filterObject, mapObject } = require('../util/object');
 const browser = require('../util/browser');
-const dispatcher = require('../util/dispatcher');
 const { getType: getSourceType, setType: setSourceType } = require('../source/source');
 const { queryRenderedFeatures, queryRenderedSymbols, querySourceFeatures } = require('../source/query_features');
 const SourceCache = require('../source/source_cache');
-const getWorkerPool = require('../util/global_worker_pool');
-const deref = require('../style-spec/deref');
-const { registerForPluginAvailability, evented: rtlTextPluginEvented } = require('../source/rtl_text_plugin');
+const plugin = require('../source/rtl_text_plugin');
 const PauseablePlacement = require('./pauseable_placement');
 const ZoomHistory = require('./zoom_history');
 const CrossTileSymbolIndex = require('../symbol/cross_tile_symbol_index');
+const StyleLayerIndex = require('../style/style_layer_index');
+const { resources } = require('../source/resources');
+
+const properties = [
+  'version',
+  'name',
+  'metadata',
+  'center',
+  'zoom',
+  'bearing',
+  'pitch',
+  'state',
+  'sprite',
+  'glyphs',
+  'transition'
+];
 
 /**
  * @private
  */
 class Style extends Evented {
-  // exposed to allow stubbing by unit tests
+  #resources = resources({
+    getImages: this.getImages.bind(this),
+    loadGlyphRange: this.loadGlyphRange.bind(this)
+  });
+  #layerIndex = new StyleLayerIndex();
 
   constructor(map, options = {}) {
     super();
 
     this.map = map;
-    this.dispatcher = dispatcher(getWorkerPool(), this);
     this.imageManager = new ImageManager();
     this.glyphManager = new GlyphManager();
+
     this.lineAtlas = new LineAtlas(256, 512);
     this.crossTileSymbolIndex = new CrossTileSymbolIndex();
 
-    this._layers = {};
-    this._order = [];
-    this.sourceCaches = {};
+    // insertion operations are done in the order of the layers in the style
+    this._layers = new Map();
+    this._sources = {};
     this.zoomHistory = new ZoomHistory();
     this._loaded = false;
     this._globalState = {};
 
+    this._updatedLayers = new Map();
+    this._removedLayers = new Map();
     this._resetUpdates();
 
-    const self = this;
-    this._rtlTextPluginCallback = Style.registerForPluginAvailability(args => {
-      self.dispatcher
-        .broadcast('loadRTLTextPlugin', args.pluginURL)
-        .then(_ => args.completionCallback(), args.completionCallback);
-      for (const id in self.sourceCaches) {
-        self.sourceCaches[id].reload(); // Should be a no-op if the plugin loads before any tiles load
-      }
-    });
+    this._rtlTextPluginCallbackUnregister = plugin.registerForPluginAvailability(this._reloadSources.bind(this));
 
     this.on('data', event => {
       if (event.dataType !== 'source' || event.sourceDataType !== 'metadata') {
         return;
       }
 
-      const sourceCache = this.sourceCaches[event.sourceId];
+      const sourceCache = this._sources[event.sourceId];
       if (!sourceCache) {
         return;
       }
@@ -70,8 +81,7 @@ class Style extends Evented {
         return;
       }
 
-      for (const layerId in this._layers) {
-        const layer = this._layers[layerId];
+      for (const layer of this._layers.values()) {
         if (layer.source === source.id) {
           this._validateLayer(layer);
         }
@@ -90,14 +100,7 @@ class Style extends Evented {
 
     this._globalState[name] = newValue;
 
-    const sourceIdsToReload = this._findGlobalStateAffectedSources([name]);
-
-    for (const id in this.sourceCaches) {
-      if (sourceIdsToReload.has(id)) {
-        this._reloadSource(id);
-        this._changed = true;
-      }
-    }
+    this._applyGlobalStateChanges([name]);
   }
 
   getGlobalState() {
@@ -118,39 +121,43 @@ class Style extends Evented {
       }
     }
 
-    const sourceIdsToReload = this._findGlobalStateAffectedSources(changedGlobalStateRefs);
-
-    for (const id in this.sourceCaches) {
-      if (sourceIdsToReload.has(id)) {
-        this._reloadSource(id);
-        this._changed = true;
-      }
-    }
+    this._applyGlobalStateChanges(changedGlobalStateRefs);
   }
 
   /**
-   * Find all sources that are affected by the global state changes.
-   * For example, if a layer filter uses global-state expression, this function will return the source id of that layer.
+   *  * Find all sources that are affected by the global state changes and reload them.
+   * Find all paint properties that are affected by the global state changes and update them.
+   * For example, if a layer filter uses global-state expression, this function will find the source id of that layer.
    */
-  _findGlobalStateAffectedSources(globalStateRefs) {
+  _applyGlobalStateChanges(globalStateRefs) {
     if (globalStateRefs.length === 0) {
-      return new Set();
+      return;
     }
 
     const sourceIdsToReload = new Set();
 
-    for (const layerId in this._layers) {
-      const layer = this._layers[layerId];
+    for (const layer of this._layers.values()) {
       const layoutAffectingGlobalStateRefs = layer.getLayoutAffectingGlobalStateRefs();
+      const paintAffectingGlobalStateRefs = layer.getPaintAffectingGlobalStateRefs();
 
       for (const ref of globalStateRefs) {
         if (layoutAffectingGlobalStateRefs.has(ref)) {
           sourceIdsToReload.add(layer.source);
         }
+        if (paintAffectingGlobalStateRefs.has(ref)) {
+          for (const { name, value } of paintAffectingGlobalStateRefs.get(ref)) {
+            this._updatePaintProperty(layer, name, value);
+          }
+        }
       }
     }
 
-    return sourceIdsToReload;
+    for (const id in this._sources) {
+      if (sourceIdsToReload.has(id)) {
+        this._reloadSource(id);
+        this._changed = true;
+      }
+    }
   }
 
   loadJSON(json) {
@@ -164,7 +171,9 @@ class Style extends Evented {
   _load(json) {
     this._loaded = true;
     this.stylesheet = json;
+    properties.forEach(prop => (this[prop] = json[prop]));
 
+    this.sources = {};
     for (const id in json.sources) {
       this.addSource(id, json.sources[id]);
     }
@@ -188,20 +197,22 @@ class Style extends Evented {
 
     this.glyphManager.setGlyphsLoader(json.glyphs);
 
-    const layers = deref(this.stylesheet.layers);
-
-    this._order = layers.map(layer => layer.id);
+    const layers = this.stylesheet.layers;
 
-    this._layers = {};
+    this._layers.clear();
     for (let layer of layers) {
+      if (layer.ref) {
+        continue; // just ignore layers that reference other layers
+      }
       layer = createStyleLayer(layer);
       layer.setEventedParent(this, { layer: { id: layer.id } });
-      this._layers[layer.id] = layer;
+      this._layers.set(layer.id, layer);
     }
 
-    this.dispatcher.broadcast('setLayers', this._serializeLayers(this._order));
+    this.#layerIndex.replace(this._layers);
 
-    this.light = new Light(this.stylesheet.light);
+    this.light = this.stylesheet.light;
+    this._light = new Light(this.light);
 
     this.setGlobalState(this.stylesheet.state ?? null);
 
@@ -210,7 +221,7 @@ class Style extends Evented {
   }
 
   _validateLayer(layer) {
-    const sourceCache = this.sourceCaches[layer.source];
+    const sourceCache = this._sources[layer.source];
     if (!sourceCache) {
       return;
     }
@@ -239,30 +250,26 @@ class Style extends Evented {
 
     if (Object.keys(this._updatedSources).length) return false;
 
-    for (const id in this.sourceCaches) if (!this.sourceCaches[id].loaded()) return false;
+    for (const id in this._sources) if (!this._sources[id].loaded()) return false;
 
     if (!this.imageManager.isLoaded()) return false;
 
     return true;
   }
 
-  _serializeLayers(ids) {
-    return ids.map(id => this._layers[id].serialize());
-  }
-
   hasTransitions() {
-    if (this.light?.hasTransition()) {
+    if (this._light?.hasTransition()) {
       return true;
     }
 
-    for (const id in this.sourceCaches) {
-      if (this.sourceCaches[id].hasTransition()) {
+    for (const id in this._sources) {
+      if (this._sources[id].hasTransition()) {
         return true;
       }
     }
 
-    for (const id in this._layers) {
-      if (this._layers[id].hasTransition()) {
+    for (const layer of this._layers.values()) {
+      if (layer.hasTransition()) {
         return true;
       }
     }
@@ -285,11 +292,8 @@ class Style extends Evented {
     }
 
     if (this._changed) {
-      const updatedIds = Object.keys(this._updatedLayers);
-      const removedIds = Object.keys(this._removedLayers);
-
-      if (updatedIds.length || removedIds.length) {
-        this._updateWorkerLayers(updatedIds, removedIds);
+      if (this._updatedLayers.size || this._removedLayers.size) {
+        this._updateWorkerLayers();
       }
       for (const id in this._updatedSources) {
         const action = this._updatedSources[id];
@@ -302,45 +306,40 @@ class Style extends Evented {
       }
 
       for (const id in this._updatedPaintProps) {
-        this._layers[id].updateTransitions(parameters);
+        this._layers.get(id).updateTransitions(parameters);
       }
 
-      this.light.updateTransitions(parameters);
+      this._light.updateTransitions(parameters);
 
       this._resetUpdates();
 
       this.fire(new Event('data', { dataType: 'style' }));
     }
 
-    for (const sourceId in this.sourceCaches) {
-      this.sourceCaches[sourceId].used = false;
+    for (const sourceId in this._sources) {
+      this._sources[sourceId].used = false;
     }
 
-    for (const layerId of this._order) {
-      const layer = this._layers[layerId];
-
+    for (const layer of this._layers.values()) {
       layer.recalculate(parameters);
       if (!layer.isHidden(parameters.zoom) && layer.source) {
-        this.sourceCaches[layer.source].used = true;
+        this._sources[layer.source].used = true;
       }
     }
 
-    this.light.recalculate(parameters);
+    this._light.recalculate(parameters);
     this.z = parameters.zoom;
   }
 
-  _updateWorkerLayers(updatedIds, removedIds) {
-    this.dispatcher.broadcast('updateLayers', {
-      layers: this._serializeLayers(updatedIds),
-      removedIds: removedIds
-    });
+  _updateWorkerLayers() {
+    this.#layerIndex.update();
   }
 
   _resetUpdates() {
     this._changed = false;
 
-    this._updatedLayers = {};
-    this._removedLayers = {};
+    this._updatedLayers.clear();
+    this._removedLayers.clear();
 
     this._updatedSources = {};
     this._updatedPaintProps = {};
@@ -375,7 +374,7 @@ class Style extends Evented {
   addSource(id, source) {
     this._checkLoaded();
 
-    if (this.sourceCaches[id] !== undefined) {
+    if (this._sources[id] !== undefined) {
       throw new Error('There is already a source with this ID');
     }
 
@@ -385,11 +384,17 @@ class Style extends Evented {
       );
     }
 
-    const sourceCache = (this.sourceCaches[id] = new SourceCache(id, source, this.dispatcher));
+    this.sources[id] = source;
+
+    const sourceCache = (this._sources[id] = new SourceCache(id, source, {
+      resources: this.#resources,
+      layerIndex: this.#layerIndex,
+      showTileBoundaries: this.map.showTileBoundaries
+    }));
     sourceCache.style = this;
     sourceCache.setEventedParent(this, () => ({
       isSourceLoaded: this.loaded(),
-      source: sourceCache.serialize(),
+      source: sourceCache,
       sourceId: id
     }));
 
@@ -405,19 +410,19 @@ class Style extends Evented {
   removeSource(id) {
     this._checkLoaded();
 
-    if (this.sourceCaches[id] === undefined) {
+    if (this._sources[id] === undefined) {
       throw new Error('There is no source with this ID');
     }
-    for (const layerId in this._layers) {
-      if (this._layers[layerId].source === id) {
+    for (const [layerId, layer] of this._layers) {
+      if (layer.source === id) {
         return this.fire(
           new ErrorEvent(new Error(`Source "${id}" cannot be removed while layer "${layerId}" is using it.`))
         );
       }
     }
 
-    const sourceCache = this.sourceCaches[id];
-    delete this.sourceCaches[id];
+    const sourceCache = this._sources[id];
+    delete this._sources[id];
     delete this._updatedSources[id];
     sourceCache.fire(new Event('data', { sourceDataType: 'metadata', dataType: 'source', sourceId: id }));
     sourceCache.setEventedParent(null);
@@ -435,10 +440,11 @@ class Style extends Evented {
   setGeoJSONSourceData(id, data) {
     this._checkLoaded();
 
-    assert(this.sourceCaches[id] !== undefined, 'There is no source with this ID');
-    const geojsonSource = this.sourceCaches[id].getSource();
+    assert(this._sources[id] !== undefined, 'There is no source with this ID');
+    const geojsonSource = this._sources[id].getSource();
     assert(geojsonSource.type === 'geojson');
 
+    this.sources[id].data = data;
     geojsonSource.setData(data);
     this._changed = true;
   }
@@ -449,7 +455,36 @@ class Style extends Evented {
    * @returns {Object} source
    */
   getSource(id) {
-    return this.sourceCaches[id]?.getSource();
+    return this._sources[id]?.getSource();
+  }
+
+  _insertLayer(id, layer, before, move) {
+    if (!before) {
+      if (move) {
+        this._layers.delete(id);
+      }
+      this._layers.set(id, layer);
+      this._layerOrderChanged = true;
+      return;
+    }
+    let beforeFound;
+    const _layers = new Map();
+    for (const [key, value] of this._layers.entries()) {
+      if (key === before) {
+        _layers.set(id, layer);
+        beforeFound = true;
+      }
+      if (move && key === id) {
+        continue;
+      }
+      _layers.set(key, value);
+    }
+    if (!beforeFound) {
+      this.fire(new ErrorEvent(new Error(`Layer with id "${before}" does not exist on this map.`)));
+      return;
+    }
+    this._layers = _layers;
+    this._layerOrderChanged = true;
   }
 
   /**
@@ -478,18 +513,9 @@ class Style extends Evented {
 
     layer.setEventedParent(this, { layer: { id: id } });
 
-    const index = before ? this._order.indexOf(before) : this._order.length;
-    if (before && index === -1) {
-      this.fire(new ErrorEvent(new Error(`Layer with id "${before}" does not exist on this map.`)));
-      return;
-    }
+    this._insertLayer(id, layer, before);
 
-    this._order.splice(index, 0, id);
-    this._layerOrderChanged = true;
-
-    this._layers[id] = layer;
-
-    if (this._removedLayers[id] && layer.source) {
+    if (this._removedLayers.has(id) && layer.source) {
       // If, in the current batch, we have already removed this layer
       // and we are now re-adding it with a different `type`, then we
       // need to clear (rather than just reload) the underyling source's
@@ -497,13 +523,13 @@ class Style extends Evented {
       // buffers that are set up for the _previous_ version of this
       // layer, causing, e.g.:
       // https://github.com/mapbox/mapbox-gl-js/issues/3633
-      const removed = this._removedLayers[id];
-      delete this._removedLayers[id];
+      const removed = this._removedLayers.get(id);
+      this._removedLayers.delete(id);
       if (removed.type !== layer.type) {
         this._updatedSources[layer.source] = 'clear';
       } else {
         this._updatedSources[layer.source] = 'reload';
-        this.sourceCaches[layer.source].pause();
+        this._sources[layer.source].pause();
       }
     }
     this._updateLayer(layer);
@@ -519,7 +545,7 @@ class Style extends Evented {
     this._checkLoaded();
     this._changed = true;
 
-    const layer = this._layers[id];
+    const layer = this._layers.get(id);
     if (!layer) {
       this.fire(new ErrorEvent(new Error(`The layer '${id}' does not exist in the map's style and cannot be moved.`)));
       return;
@@ -529,17 +555,7 @@ class Style extends Evented {
       return;
     }
 
-    const index = this._order.indexOf(id);
-    this._order.splice(index, 1);
-
-    const newIndex = before ? this._order.indexOf(before) : this._order.length;
-    if (before && newIndex === -1) {
-      this.fire(new ErrorEvent(new Error(`Layer with id "${before}" does not exist on this map.`)));
-      return;
-    }
-    this._order.splice(newIndex, 0, id);
-
-    this._layerOrderChanged = true;
+    this._insertLayer(id, layer, before, true);
   }
 
   /**
@@ -553,7 +569,7 @@ class Style extends Evented {
   removeLayer(id) {
     this._checkLoaded();
 
-    const layer = this._layers[id];
+    const layer = this._layers.get(id);
     if (!layer) {
       this.fire(
         new ErrorEvent(new Error(`The layer '${id}' does not exist in the map's style and cannot be removed.`))
@@ -563,14 +579,11 @@ class Style extends Evented {
 
     layer.setEventedParent(null);
 
-    const index = this._order.indexOf(id);
-    this._order.splice(index, 1);
-
     this._layerOrderChanged = true;
     this._changed = true;
-    this._removedLayers[id] = layer;
-    delete this._layers[id];
-    delete this._updatedLayers[id];
+    this._removedLayers.set(id, layer);
+    this._layers.delete(id);
+    this._updatedLayers.delete(id);
     delete this._updatedPaintProps[id];
   }
 
@@ -581,7 +594,7 @@ class Style extends Evented {
    * @returns {?Object} a layer, if one with the given `id` exists
    */
   getLayer(id) {
-    return this._layers[id];
+    return this._layers.get(id);
   }
 
   setLayerZoomRange(layerId, minzoom, maxzoom) {
@@ -597,15 +610,13 @@ class Style extends Evented {
       return;
     }
 
-    if (layer.minzoom === minzoom && layer.maxzoom === maxzoom) return;
-
-    if (minzoom != null) {
-      layer.minzoom = minzoom;
-    }
-    if (maxzoom != null) {
-      layer.maxzoom = maxzoom;
+    if (layer._setZoomRange(minzoom, maxzoom)) {
+      this._updateLayer(layer);
     }
-    this._updateLayer(layer);
+  }
+
+  get layers() {
+    return Array.from(this._layers.values());
   }
 
   setFilter(layerId, filter) {
@@ -656,6 +667,10 @@ class Style extends Evented {
     if (deepEqual(layer.getLayoutProperty(name), value)) return;
 
     layer.setLayoutProperty(name, value);
+    const layerObject = this.layers.find(({ id }) => id === layerId);
+    layerObject.layout ??= {};
+    layerObject.layout[name] = value;
+
     this._updateLayer(layer);
   }
 
@@ -682,13 +697,21 @@ class Style extends Evented {
 
     if (deepEqual(layer.getPaintProperty(name), value)) return;
 
+    const layerObject = this.layers.find(({ id }) => id === layerId);
+    layerObject.paint ??= {};
+    layerObject.paint[name] = value;
+
+    this._updatePaintProperty(layer, name, value);
+  }
+
+  _updatePaintProperty(layer, name, value) {
     const requiresRelayout = layer.setPaintProperty(name, value);
     if (requiresRelayout) {
       this._updateLayer(layer);
     }
 
     this._changed = true;
-    this._updatedPaintProps[layerId] = true;
+    this._updatedPaintProps[layer.id] = true;
   }
 
   getPaintProperty(layer, name) {
@@ -699,13 +722,17 @@ class Style extends Evented {
     this._checkLoaded();
     const sourceId = feature.source;
     const sourceLayer = feature.sourceLayer;
-    const sourceCache = this.sourceCaches[sourceId];
+    const sourceCache = this._sources[sourceId];
 
     if (sourceCache === undefined) {
       this.fire(new ErrorEvent(new Error(`The source '${sourceId}' does not exist in the map's style.`)));
       return;
     }
     const sourceType = sourceCache.getSource().type;
+    if (sourceType === 'geojson' && sourceLayer) {
+      this.fire(new ErrorEvent(new Error('GeoJSON sources cannot have a sourceLayer parameter.')));
+      return;
+    }
     if (sourceType === 'vector' && !sourceLayer) {
       this.fire(new ErrorEvent(new Error('The sourceLayer parameter must be provided for vector source types.')));
       return;
@@ -718,11 +745,37 @@ class Style extends Evented {
     sourceCache.setFeatureState(sourceLayer, feature.id, state);
   }
 
+  removeFeatureState(target, key) {
+    this._checkLoaded();
+    const sourceId = target.source;
+    const sourceCache = this._sources[sourceId];
+
+    if (sourceCache === undefined) {
+      this.fire(new ErrorEvent(new Error(`The source '${sourceId}' does not exist in the map's style.`)));
+      return;
+    }
+
+    const sourceType = sourceCache.getSource().type;
+    const sourceLayer = sourceType === 'vector' ? target.sourceLayer : undefined;
+
+    if (sourceType === 'vector' && !sourceLayer) {
+      this.fire(new ErrorEvent(new Error('The sourceLayer parameter must be provided for vector source types.')));
+      return;
+    }
+
+    if (key && typeof target.id !== 'string' && typeof target.id !== 'number') {
+      this.fire(new ErrorEvent(new Error('A feature id is required to remove its specific state property.')));
+      return;
+    }
+
+    sourceCache.removeFeatureState(sourceLayer, target.id, key);
+  }
+
   getFeatureState(feature) {
     this._checkLoaded();
     const sourceId = feature.source;
     const sourceLayer = feature.sourceLayer;
-    const sourceCache = this.sourceCaches[sourceId];
+    const sourceCache = this._sources[sourceId];
 
     if (sourceCache === undefined) {
       this.fire(new ErrorEvent(new Error(`The source '${sourceId}' does not exist in the map's style.`)));
@@ -741,63 +794,79 @@ class Style extends Evented {
     return Object.assign({ duration: 300, delay: 0 }, this.stylesheet?.transition);
   }
 
-  serialize() {
-    return filterObject(
-      {
-        version: this.stylesheet.version,
-        name: this.stylesheet.name,
-        metadata: this.stylesheet.metadata,
-        light: this.stylesheet.light,
-        center: this.stylesheet.center,
-        zoom: this.stylesheet.zoom,
-        bearing: this.stylesheet.bearing,
-        pitch: this.stylesheet.pitch,
-        sprite: this.stylesheet.sprite,
-        glyphs: this.stylesheet.glyphs,
-        transition: this.stylesheet.transition,
-        sources: mapObject(this.sourceCaches, source => source.serialize()),
-        layers: this._order.map(id => this._layers[id].serialize())
-      },
-      value => value !== undefined
-    );
-  }
-
   _updateLayer(layer) {
-    this._updatedLayers[layer.id] = true;
+    this._updatedLayers.set(layer.id, layer);
     if (layer.source && !this._updatedSources[layer.source]) {
       this._updatedSources[layer.source] = 'reload';
-      this.sourceCaches[layer.source].pause();
+      this._sources[layer.source].pause();
     }
     this._changed = true;
   }
 
   _flattenAndSortRenderedFeatures(sourceResults) {
-    const features = [];
+    // Feature order is complicated.
+    // The order between features in two 2D layers is always determined by layer order.
+    // The order between features in two 3D layers is always determined by depth.
+    // The order between a feature in a 2D layer and a 3D layer is tricky:
+    //      Most often layer order determines the feature order in this case. If
+    //      a line layer is above a extrusion layer the line feature will be rendered
+    //      above the extrusion. If the line layer is below the extrusion layer,
+    //      it will be rendered below it.
+    //
+    //      There is a weird case though.
+    //      You have layers in this order: extrusion_layer_a, line_layer, extrusion_layer_b
+    //      Each layer has a feature that overlaps the other features.
+    //      The feature in extrusion_layer_a is closer than the feature in extrusion_layer_b so it is rendered above.
+    //      The feature in line_layer is rendered above extrusion_layer_a.
+    //      This means that that the line_layer feature is above the extrusion_layer_b feature despite
+    //      it being in an earlier layer.
+
+    const isLayer3D = layer => layer.type === 'fill-extrusion';
+
+    const layerIndex = new Map();
     const features3D = [];
-    for (let l = this._order.length - 1; l >= 0; l--) {
-      const layerId = this._order[l];
-      for (const sourceResult of sourceResults) {
-        const layerFeatures = sourceResult[layerId];
-        if (layerFeatures) {
-          if (this._layers[layerId].type === 'fill-extrusion') {
+    const layers = Array.from(this._layers.values());
+    for (let l = layers.length - 1; l >= 0; l--) {
+      const layer = layers[l];
+      if (isLayer3D(layer)) {
+        layerIndex.set(layer.id, l);
+        for (const sourceResult of sourceResults) {
+          const layerFeatures = sourceResult[layer.id];
+          if (layerFeatures) {
             for (const featureWrapper of layerFeatures) {
               features3D.push(featureWrapper);
             }
-          } else {
-            for (const featureWrapper of layerFeatures) {
-              features.push(featureWrapper.feature);
-            }
           }
         }
       }
     }
 
     features3D.sort((a, b) => {
-      return a.intersectionZ - b.intersectionZ;
+      return b.intersectionZ - a.intersectionZ;
     });
 
-    for (const featureWrapper of features3D) {
-      features.push(featureWrapper.feature);
+    const features = [];
+    for (let l = layers.length - 1; l >= 0; l--) {
+      const layer = layers[l];
+
+      if (isLayer3D(layer)) {
+        // add all 3D features that are in or above the current layer
+        for (let i = features3D.length - 1; i >= 0; i--) {
+          const topmost3D = features3D[i].feature;
+          if (layerIndex.get(topmost3D.layer.id) < l) break;
+          features.push(topmost3D);
+          features3D.pop();
+        }
+      } else {
+        for (const sourceResult of sourceResults) {
+          const layerFeatures = sourceResult[layer.id];
+          if (layerFeatures) {
+            for (const featureWrapper of layerFeatures) {
+              features.push(featureWrapper.feature);
+            }
+          }
+        }
+      }
     }
 
     return features;
@@ -811,7 +880,7 @@ class Style extends Evented {
         return [];
       }
       for (const layerId of params.layers) {
-        const layer = this._layers[layerId];
+        const layer = this._layers.get(layerId);
         if (layer) {
           includedSources[layer.source] = true;
         }
@@ -819,10 +888,10 @@ class Style extends Evented {
     }
 
     const sourceResults = [];
-    for (const id in this.sourceCaches) {
+    for (const id in this._sources) {
       if (params.layers && !includedSources[id]) continue;
       sourceResults.push(
-        queryRenderedFeatures(this.sourceCaches[id], this._layers, queryGeometry.viewport, params, transform)
+        queryRenderedFeatures(this._sources[id], this._layers, queryGeometry.viewport, params, transform)
       );
     }
 
@@ -832,7 +901,7 @@ class Style extends Evented {
       sourceResults.push(
         queryRenderedSymbols(
           this._layers,
-          this.sourceCaches,
+          this._sources,
           queryGeometry.viewport,
           params,
           this.placement.collisionIndex,
@@ -844,18 +913,18 @@ class Style extends Evented {
   }
 
   querySourceFeatures(sourceID, params) {
-    const sourceCache = this.sourceCaches[sourceID];
+    const sourceCache = this._sources[sourceID];
     return sourceCache ? querySourceFeatures(sourceCache, params) : [];
   }
 
   getLight() {
-    return this.light.getLight();
+    return this._light.getLight();
   }
 
   setLight(lightOptions) {
     this._checkLoaded();
 
-    const light = this.light.getLight();
+    const light = this._light.getLight();
     let _update = false;
     for (const key in lightOptions) {
       if (!deepEqual(lightOptions[key], light[key])) {
@@ -876,35 +945,40 @@ class Style extends Evented {
       )
     };
 
-    this.light.setLight(lightOptions);
-    this.light.updateTransitions(parameters);
+    this._light.setLight(lightOptions);
+    this._light.updateTransitions(parameters);
   }
 
   _remove() {
-    rtlTextPluginEvented.off('pluginAvailable', this._rtlTextPluginCallback);
-    for (const id in this.sourceCaches) {
-      this.sourceCaches[id].clearTiles();
+    this._rtlTextPluginCallbackUnregister?.();
+    for (const id in this._sources) {
+      this._sources[id].clearTiles();
     }
-    this.dispatcher.remove();
   }
 
   _clearSource(id) {
-    this.sourceCaches[id].clearTiles();
+    this._sources[id].clearTiles();
   }
 
   _reloadSource(id) {
-    this.sourceCaches[id].resume();
-    this.sourceCaches[id].reload();
+    this._sources[id].resume();
+    this._sources[id].reload();
   }
 
   _updateSources(transform) {
-    for (const id in this.sourceCaches) {
-      this.sourceCaches[id].update(transform);
+    for (const id in this._sources) {
+      this._sources[id].update(transform);
+    }
+  }
+
+  _reloadSources() {
+    for (const sourceCache of Object.values(this._sources)) {
+      sourceCache.reload(); // Should be a no-op if called before any tiles load
     }
   }
 
   _generateCollisionBoxes() {
-    for (const id in this.sourceCaches) {
+    for (const id in this._sources) {
       this._reloadSource(id);
     }
   }
@@ -915,26 +989,25 @@ class Style extends Evented {
 
     const layerTiles = {};
 
-    for (const layerID of this._order) {
-      const styleLayer = this._layers[layerID];
-      if (styleLayer.type !== 'symbol') continue;
+    for (const layer of this._layers.values()) {
+      if (layer.type !== 'symbol') continue;
 
-      if (!layerTiles[styleLayer.source]) {
-        const sourceCache = this.sourceCaches[styleLayer.source];
-        layerTiles[styleLayer.source] = sourceCache
+      if (!layerTiles[layer.source]) {
+        const sourceCache = this._sources[layer.source];
+        layerTiles[layer.source] = sourceCache
           .getRenderableIds(true)
           .map(id => sourceCache.getTileByID(id))
           .sort((a, b) => b.tileID.overscaledZ - a.tileID.overscaledZ || (a.tileID.isLessThan(b.tileID) ? -1 : 1));
       }
 
       const layerBucketsChanged = this.crossTileSymbolIndex.addLayer(
-        styleLayer,
-        layerTiles[styleLayer.source],
+        layer,
+        layerTiles[layer.source],
         transform.center.lng
       );
       symbolBucketsChanged = symbolBucketsChanged || layerBucketsChanged;
     }
-    this.crossTileSymbolIndex.pruneUnusedLayers(this._order);
+    this.crossTileSymbolIndex.pruneUnusedLayers(this._layers.keys());
 
     // Anything that changes our "in progress" layer and tile indices requires us
     // to start over. When we start over, we do a full placement instead of incremental
@@ -949,7 +1022,7 @@ class Style extends Evented {
     ) {
       this.pauseablePlacement = new PauseablePlacement(
         transform,
-        this._order,
+        this._layers.size - 1,
         forceFullPlacement,
         showCollisionBoxes,
         fadeDuration,
@@ -965,7 +1038,7 @@ class Style extends Evented {
       // render frame
       this.placement.setStale();
     } else {
-      this.pauseablePlacement.continuePlacement(this._order, this._layers, layerTiles);
+      this.pauseablePlacement.continuePlacement(Array.from(this._layers.values()), layerTiles);
 
       if (this.pauseablePlacement.isDone()) {
         this.placement = this.pauseablePlacement.commit(this.placement, browser.now());
@@ -981,10 +1054,9 @@ class Style extends Evented {
     }
 
     if (placementCommitted || symbolBucketsChanged) {
-      for (const layerID of this._order) {
-        const styleLayer = this._layers[layerID];
-        if (styleLayer.type !== 'symbol') continue;
-        this.placement.updateLayerOpacities(styleLayer, layerTiles[styleLayer.source]);
+      for (const layer of this._layers.values()) {
+        if (layer.type !== 'symbol') continue;
+        this.placement.updateLayerOpacities(layer, layerTiles[layer.source]);
       }
     }
 
@@ -994,24 +1066,22 @@ class Style extends Evented {
   }
 
   _releaseSymbolFadeTiles() {
-    for (const id in this.sourceCaches) {
-      this.sourceCaches[id].releaseSymbolFadeTiles();
+    for (const id in this._sources) {
+      this._sources[id].releaseSymbolFadeTiles();
     }
   }
 
   // Callbacks from web workers
-
-  getImages(_mapId, { icons }) {
+  getImages({ icons }) {
     return this.imageManager.getImages(icons);
   }
 
-  loadGlyphRange(_mapId, { stack, range }) {
+  loadGlyphRange({ stack, range }) {
     return this.glyphManager.loadGlyphRange(stack, range);
   }
 }
 
 Style.getSourceType = getSourceType;
 Style.setSourceType = setSourceType;
-Style.registerForPluginAvailability = registerForPluginAvailability;
 
 module.exports = Style;