@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/style/style.js

@@ -1,66 +1,76 @@
-const assert = require('assert');
-
-const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
-const createStyleLayer = require('./create_style_layer');
-const loadSprite = require('./load_sprite');
-const ImageManager = require('../render/image_manager');
-const GlyphManager = require('../render/glyph_manager');
-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 PauseablePlacement = require('./pauseable_placement');
-const ZoomHistory = require('./zoom_history');
-const CrossTileSymbolIndex = require('../symbol/cross_tile_symbol_index');
+import { ErrorEvent, Event, Evented } from '@mapwhit/events';
+import assert from 'assert';
+import GlyphManager from '../render/glyph_manager.js';
+import ImageManager from '../render/image_manager.js';
+import LineAtlas from '../render/line_atlas.js';
+import { queryRenderedFeatures, queryRenderedSymbols, querySourceFeatures } from '../source/query_features.js';
+import { resources } from '../source/resources/index.js';
+import plugin from '../source/rtl_text_plugin.js';
+import { getType as getSourceType, setType as setSourceType } from '../source/source.js';
+import SourceCache from '../source/source_cache.js';
+import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index.js';
+import browser from '../util/browser.js';
+import { clone, deepEqual } from '../util/object.js';
+import createStyleLayer from './create_style_layer.js';
+import Light from './light.js';
+import loadSprite from './load_sprite.js';
+import PauseablePlacement from './pauseable_placement.js';
+import StyleLayerIndex from './style_layer_index.js';
+import ZoomHistory from './zoom_history.js';
+
+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 +80,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);
         }
@@ -126,8 +135,7 @@ class Style extends Evented {
 
     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();
 
@@ -143,7 +151,7 @@ class Style extends Evented {
       }
     }
 
-    for (const id in this.sourceCaches) {
+    for (const id in this._sources) {
       if (sourceIdsToReload.has(id)) {
         this._reloadSource(id);
         this._changed = true;
@@ -162,7 +170,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]);
     }
@@ -186,20 +196,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);
 
@@ -208,7 +220,7 @@ class Style extends Evented {
   }
 
   _validateLayer(layer) {
-    const sourceCache = this.sourceCaches[layer.source];
+    const sourceCache = this._sources[layer.source];
     if (!sourceCache) {
       return;
     }
@@ -233,34 +245,40 @@ class Style extends Evented {
   }
 
   loaded() {
-    if (!this._loaded) return false;
+    if (!this._loaded) {
+      return false;
+    }
 
-    if (Object.keys(this._updatedSources).length) return false;
+    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;
+    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;
       }
     }
@@ -283,11 +301,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];
@@ -300,45 +315,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 = {};
@@ -373,7 +383,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');
     }
 
@@ -383,11 +393,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
     }));
 
@@ -403,25 +419,27 @@ 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);
     sourceCache.clearTiles();
 
-    if (sourceCache.onRemove) sourceCache.onRemove(this.map);
+    if (sourceCache.onRemove) {
+      sourceCache.onRemove(this.map);
+    }
     this._changed = true;
   }
 
@@ -433,10 +451,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;
   }
@@ -447,7 +466,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;
   }
 
   /**
@@ -476,18 +524,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._order.splice(index, 0, id);
-    this._layerOrderChanged = true;
+    this._insertLayer(id, layer, before);
 
-    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
@@ -495,13 +534,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);
@@ -517,7 +556,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;
@@ -527,17 +566,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);
   }
 
   /**
@@ -551,7 +580,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.`))
@@ -561,14 +590,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];
   }
 
@@ -579,7 +605,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) {
@@ -595,15 +621,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) {
@@ -651,9 +675,15 @@ class Style extends Evented {
       return;
     }
 
-    if (deepEqual(layer.getLayoutProperty(name), value)) return;
+    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);
   }
 
@@ -678,7 +708,13 @@ class Style extends Evented {
       return;
     }
 
-    if (deepEqual(layer.getPaintProperty(name), value)) return;
+    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);
   }
@@ -701,13 +737,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;
@@ -720,11 +760,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.`)));
@@ -743,63 +809,81 @@ 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;
@@ -813,7 +897,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;
         }
@@ -821,10 +905,12 @@ class Style extends Evented {
     }
 
     const sourceResults = [];
-    for (const id in this.sourceCaches) {
-      if (params.layers && !includedSources[id]) continue;
+    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)
       );
     }
 
@@ -834,7 +920,7 @@ class Style extends Evented {
       sourceResults.push(
         queryRenderedSymbols(
           this._layers,
-          this.sourceCaches,
+          this._sources,
           queryGeometry.viewport,
           params,
           this.placement.collisionIndex,
@@ -846,18 +932,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])) {
@@ -865,7 +951,9 @@ class Style extends Evented {
         break;
       }
     }
-    if (!_update) return;
+    if (!_update) {
+      return;
+    }
 
     const parameters = {
       now: browser.now(),
@@ -878,35 +966,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);
     }
   }
@@ -917,26 +1010,27 @@ 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
@@ -951,7 +1045,7 @@ class Style extends Evented {
     ) {
       this.pauseablePlacement = new PauseablePlacement(
         transform,
-        this._order,
+        this._layers.size - 1,
         forceFullPlacement,
         showCollisionBoxes,
         fadeDuration,
@@ -967,7 +1061,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());
@@ -983,10 +1077,11 @@ 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]);
       }
     }
 
@@ -996,24 +1091,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;
+export default Style;