@mapwhit/tilerenderer 1.2.2 → 1.4.0

package/src/render/draw_symbol.js

@@ -1,10 +1,15 @@
 import glMatrix from '@mapbox/gl-matrix';
+import { addDynamicAttributes } from '../data/bucket/symbol_bucket.js';
+import SegmentVector from '../data/segment.js';
 import CullFaceMode from '../gl/cull_face_mode.js';
 import DepthMode from '../gl/depth_mode.js';
 import StencilMode from '../gl/stencil_mode.js';
 import pixelsToTileUnits from '../source/pixels_to_tile_units.js';
 import properties from '../style/style_layer/symbol_style_layer_properties.js';
+import ONE_EM from '../symbol/one_em.js';
 import * as symbolProjection from '../symbol/projection.js';
+import { getAnchorAlignment } from '../symbol/shaping.js';
+import { evaluateRadialOffset } from '../symbol/symbol_layout.js';
 import * as symbolSize from '../symbol/symbol_size.js';
 import drawCollisionDebug from './draw_collision_debug.js';
 import { symbolIconUniformValues, symbolSDFUniformValues } from './program/symbol_program.js';
@@ -13,7 +18,7 @@ const { mat4 } = glMatrix;
 const identityMat4 = mat4.identity(new Float32Array(16));
 const symbolLayoutProperties = properties.layout;
 
-export default function drawSymbols(painter, sourceCache, layer, coords) {
+export default function drawSymbols(painter, sourceCache, layer, coords, variableOffsets) {
   if (painter.renderPass !== 'translucent') {
     return;
   }
@@ -35,7 +40,8 @@ export default function drawSymbols(painter, sourceCache, layer, coords) {
       layer._layout.get('icon-pitch-alignment'),
       layer._layout.get('icon-keep-upright'),
       stencilMode,
-      colorMode
+      colorMode,
+      variableOffsets
     );
   }
 
@@ -52,7 +58,8 @@ export default function drawSymbols(painter, sourceCache, layer, coords) {
       layer._layout.get('text-pitch-alignment'),
       layer._layout.get('text-keep-upright'),
       stencilMode,
-      colorMode
+      colorMode,
+      variableOffsets
     );
   }
 
@@ -61,6 +68,77 @@ export default function drawSymbols(painter, sourceCache, layer, coords) {
   }
 }
 
+function calculateVariableRenderShift(anchor, width, height, radialOffset, textBoxScale, renderTextSize) {
+  const { horizontalAlign, verticalAlign } = getAnchorAlignment(anchor);
+  const shiftX = -(horizontalAlign - 0.5) * width;
+  const shiftY = -(verticalAlign - 0.5) * height;
+  const offset = evaluateRadialOffset(anchor, radialOffset);
+  return {
+    x: (shiftX / textBoxScale + offset[0]) * renderTextSize,
+    y: (shiftY / textBoxScale + offset[1]) * renderTextSize
+  };
+}
+
+function updateVariableAnchors(
+  bucket,
+  rotateWithMap,
+  pitchWithMap,
+  variableOffsets,
+  symbolSize,
+  transform,
+  labelPlaneMatrix,
+  posMatrix,
+  tileScale,
+  size
+) {
+  const placedSymbols = bucket.text.placedSymbolArray;
+  const dynamicLayoutVertexArray = bucket.text.dynamicLayoutVertexArray;
+  dynamicLayoutVertexArray.clear();
+  for (let s = 0; s < placedSymbols.length; s++) {
+    const symbol = placedSymbols.get(s);
+    const variableOffset = !symbol.hidden && symbol.crossTileID ? variableOffsets[symbol.crossTileID] : null;
+    if (!variableOffset) {
+      // These symbols are from a justification that is not being used, or a label that wasn't placed
+      // so we don't need to do the extra math to figure out what incremental shift to apply.
+      symbolProjection.hideGlyphs(symbol.numGlyphs, dynamicLayoutVertexArray);
+    } else {
+      const tileAnchor = { x: symbol.anchorX, y: symbol.anchorY };
+      const projectedAnchor = symbolProjection.project(tileAnchor, pitchWithMap ? posMatrix : labelPlaneMatrix);
+      const perspectiveRatio =
+        0.5 + 0.5 * (transform.cameraToCenterDistance / projectedAnchor.signedDistanceFromCamera);
+      let renderTextSize =
+        (symbolSize.evaluateSizeForFeature(bucket.textSizeData, size, symbol) * perspectiveRatio) / ONE_EM;
+      if (pitchWithMap) {
+        // Go from size in pixels to equivalent size in tile units
+        renderTextSize *= bucket.tilePixelRatio / tileScale;
+      }
+
+      const { width, height, radialOffset, textBoxScale } = variableOffset;
+
+      const shift = calculateVariableRenderShift(
+        variableOffset.anchor,
+        width,
+        height,
+        radialOffset,
+        textBoxScale,
+        renderTextSize
+      );
+
+      // Usual case is that we take the projected anchor and add the pixel-based shift
+      // calculated above. In the (somewhat weird) case of pitch-aligned text, we add an equivalent
+      // tile-unit based shift to the anchor before projecting to the label plane.
+      const shiftedAnchor = pitchWithMap
+        ? symbolProjection.project(tileAnchor.add(shift), labelPlaneMatrix).point
+        : projectedAnchor.point.add(rotateWithMap ? shift.rotate(-transform.angle) : shift);
+
+      for (let g = 0; g < symbol.numGlyphs; g++) {
+        addDynamicAttributes(dynamicLayoutVertexArray, shiftedAnchor, 0);
+      }
+    }
+  }
+  bucket.text.dynamicLayoutVertexBuffer.updateData(dynamicLayoutVertexArray);
+}
+
 function drawLayerSymbols(
   painter,
   sourceCache,
@@ -73,7 +151,8 @@ function drawLayerSymbols(
   pitchAlignment,
   keepUpright,
   stencilMode,
-  colorMode
+  colorMode,
+  variableOffsets
 ) {
   const context = painter.context;
   const gl = context.gl;
@@ -87,10 +166,15 @@ function drawLayerSymbols(
   // Unpitched point labels need to have their rotation applied after projection
   const rotateInShader = rotateWithMap && !pitchWithMap && !alongLine;
 
+  const sortFeaturesByKey = layer._layout.get('symbol-sort-key').constantOr(1) !== undefined;
+
   const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
 
   let program;
   let size;
+  const variablePlacement = layer._layout.get('text-variable-anchor');
+
+  const tileRenderState = [];
 
   for (const coord of coords) {
     const tile = sourceCache.getTile(coord);
@@ -120,20 +204,21 @@ function drawLayerSymbols(
     context.activeTexture.set(gl.TEXTURE0);
 
     let texSize;
+    let atlasTexture;
+    let atlasInterpolation;
     if (isText) {
-      tile.glyphAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+      atlasTexture = tile.glyphAtlasTexture;
+      atlasInterpolation = gl.LINEAR;
       texSize = tile.glyphAtlasTexture.size;
     } else {
       const iconScaled = layer._layout.get('icon-size').constantOr(0) !== 1 || bucket.iconsNeedLinear;
       const iconTransformed = pitchWithMap || tr.pitch !== 0;
 
-      tile.imageAtlasTexture.bind(
+      atlasTexture = tile.imageAtlasTexture;
+      atlasInterpolation =
         isSDF || painter.options.rotating || painter.options.zooming || iconScaled || iconTransformed
           ? gl.LINEAR
-          : gl.NEAREST,
-        gl.CLAMP_TO_EDGE
-      );
-
+          : gl.NEAREST;
       texSize = tile.imageAtlasTexture.size;
     }
 
@@ -164,16 +249,30 @@ function drawLayerSymbols(
         pitchWithMap,
         keepUpright
       );
+    } else if (isText && size && variablePlacement) {
+      const tileScale = 2 ** (tr.zoom - tile.tileID.overscaledZ);
+      updateVariableAnchors(
+        bucket,
+        rotateWithMap,
+        pitchWithMap,
+        variableOffsets,
+        symbolSize,
+        tr,
+        labelPlaneMatrix,
+        coord.posMatrix,
+        tileScale,
+        size
+      );
     }
 
     const matrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor);
-    const uLabelPlaneMatrix = alongLine ? identityMat4 : labelPlaneMatrix;
+    const uLabelPlaneMatrix = alongLine || (isText && variablePlacement) ? identityMat4 : labelPlaneMatrix;
     const uglCoordMatrix = painter.translatePosMatrix(glCoordMatrix, tile, translate, translateAnchor, true);
 
+    const hasHalo = isSDF && layer._paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
+
     let uniformValues;
     if (isSDF) {
-      const hasHalo = layer._paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
-
       uniformValues = symbolSDFUniformValues(
         sizeData.functionType,
         size,
@@ -187,12 +286,6 @@ function drawLayerSymbols(
         texSize,
         true
       );
-
-      if (hasHalo) {
-        drawSymbolElements(buffers, layer, painter, program, depthMode, stencilMode, colorMode, uniformValues);
-      }
-
-      uniformValues['u_is_halo'] = 0;
     } else {
       uniformValues = symbolIconUniformValues(
         sizeData.functionType,
@@ -208,11 +301,86 @@ function drawLayerSymbols(
       );
     }
 
-    drawSymbolElements(buffers, layer, painter, program, depthMode, stencilMode, colorMode, uniformValues);
+    const state = {
+      program,
+      buffers,
+      uniformValues,
+      atlasTexture,
+      atlasInterpolation,
+      isSDF,
+      hasHalo
+    };
+
+    if (sortFeaturesByKey) {
+      const oldSegments = buffers.segments.get();
+      for (const segment of oldSegments) {
+        tileRenderState.push({
+          segments: new SegmentVector([segment]),
+          sortKey: segment.sortKey,
+          state
+        });
+      }
+    } else {
+      tileRenderState.push({
+        segments: buffers.segments,
+        sortKey: 0,
+        state
+      });
+    }
+  }
+
+  if (sortFeaturesByKey) {
+    tileRenderState.sort((a, b) => a.sortKey - b.sortKey);
+  }
+
+  for (const segmentState of tileRenderState) {
+    const state = segmentState.state;
+
+    state.atlasTexture.bind(state.atlasInterpolation, gl.CLAMP_TO_EDGE);
+
+    if (state.isSDF) {
+      const uniformValues = state.uniformValues;
+      if (state.hasHalo) {
+        uniformValues['u_is_halo'] = 1;
+        drawSymbolElements(
+          state.buffers,
+          segmentState.segments,
+          layer,
+          painter,
+          state.program,
+          depthMode,
+          stencilMode,
+          colorMode,
+          uniformValues
+        );
+      }
+      uniformValues['u_is_halo'] = 0;
+    }
+    drawSymbolElements(
+      state.buffers,
+      segmentState.segments,
+      layer,
+      painter,
+      state.program,
+      depthMode,
+      stencilMode,
+      colorMode,
+      state.uniformValues
+    );
   }
 }
 
-function drawSymbolElements(buffers, layer, painter, program, depthMode, stencilMode, colorMode, uniformValues) {
+function drawSymbolElements(
+  buffers,
+  segments,
+  layer,
+  painter,
+  program,
+  depthMode,
+  stencilMode,
+  colorMode,
+  uniformValues
+) {
   const context = painter.context;
   const gl = context.gl;
   program.draw(
@@ -226,7 +394,7 @@ function drawSymbolElements(buffers, layer, painter, program, depthMode, stencil
     layer.id,
     buffers.layoutVertexBuffer,
     buffers.indexBuffer,
-    buffers.segments,
+    segments,
     layer._paint,
     painter.transform.zoom,
     buffers.programConfigurations.get(layer.id),

package/src/render/painter.js

@@ -417,7 +417,7 @@ export default class Painter {
     }
     this.id = layer.id;
 
-    draw[layer.type](painter, sourceCache, layer, coords);
+    draw[layer.type](painter, sourceCache, layer, coords, this.style.placement.variableOffsets);
   }
 
   /**

package/src/source/geojson_source.js

@@ -1,8 +1,9 @@
 import { ErrorEvent, Event, Evented } from '@mapwhit/events';
-
+import { createExpression } from '@mapwhit/style-expressions';
 import EXTENT from '../data/extent.js';
 import browser from '../util/browser.js';
-import GeoJSONWorkerSource from './geojson_worker_source.js';
+import warn from '../util/warn.js';
+import { applySourceDiff, isUpdateableGeoJSON, mergeSourceDiffs, toUpdateable } from './geojson_source_diff.js';
 
 /**
  * A source containing GeoJSON.
@@ -49,13 +50,16 @@ import GeoJSONWorkerSource from './geojson_worker_source.js';
  * @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 {
+export default class GeoJSONSource extends Evented {
   #pendingDataEvents = new Set();
   #newData = false;
   #updateInProgress = false;
-  #worker;
+  #dataUpdateable;
+  #pendingUpdate;
+  #pendingData;
+  #tiler;
 
-  constructor(id, options, eventedParent, { resources, layerIndex }) {
+  constructor(id, options, eventedParent, tiler) {
     super();
 
     this.id = id;
@@ -73,7 +77,7 @@ class GeoJSONSource extends Evented {
 
     this.setEventedParent(eventedParent);
 
-    this.data = options.data;
+    this.#pendingUpdate = { data: options.data };
     this._options = Object.assign({}, options);
 
     if (options.maxzoom !== undefined) {
@@ -82,6 +86,7 @@ class GeoJSONSource extends Evented {
     if (options.type) {
       this.type = options.type;
     }
+    this.promoteId = options.promoteId;
 
     const scale = EXTENT / this.tileSize;
 
@@ -114,7 +119,7 @@ class GeoJSONSource extends Evented {
       },
       options.workerOptions
     );
-    this.#worker = new GeoJSONWorkerSource(resources, layerIndex);
+    this.#tiler = tiler;
   }
 
   load() {
@@ -133,11 +138,44 @@ class GeoJSONSource extends Evented {
    * @returns {GeoJSONSource} this
    */
   setData(data) {
-    this.data = data;
+    this.#pendingUpdate = { data };
+    this.#updateData();
+    return this;
+  }
+
+  /**
+   * Updates the source's GeoJSON, and re-renders the map.
+   *
+   * For sources with lots of features, this method can be used to make updates more quickly.
+   *
+   * This approach requires unique IDs for every feature in the source. The IDs can either be specified on the feature,
+   * or by using the promoteId option to specify which property should be used as the ID.
+   *
+   * It is an error to call updateData on a source that did not have unique IDs for each of its features already.
+   *
+   * Updates are applied on a best-effort basis, updating an ID that does not exist will not result in an error.
+   *
+   * @param {GeoJSONSourceDiff} diff The changes that need to be applied.
+   * @returns {GeoJSONSource} this
+   */
+  updateData(diff) {
+    this.#pendingUpdate = {
+      data: this.#pendingUpdate?.data,
+      diff: mergeSourceDiffs(this.#pendingUpdate?.diff, diff)
+    };
     this.#updateData();
     return this;
   }
 
+  /**
+   * Allows to get the source's actual GeoJSON data.
+   *
+   * @returns a promise which resolves to the source's actual GeoJSON data
+   */
+  getData() {
+    return this.#pendingData;
+  }
+
   async #updateData(sourceDataType = 'content') {
     this.#newData = true;
     this.#pendingDataEvents.add(sourceDataType);
@@ -150,7 +188,8 @@ class GeoJSONSource extends Evented {
       this.fire(new Event('dataloading', { dataType: 'source' }));
       while (this.#newData) {
         this.#newData = false;
-        await this._updateWorkerData(this.data);
+        this.#pendingData = this.#updateTilerData();
+        await this.#pendingData;
       }
       this.#pendingDataEvents.forEach(sourceDataType =>
         this.fire(new Event('data', { dataType: 'source', sourceDataType }))
@@ -164,18 +203,32 @@ class GeoJSONSource extends Evented {
   }
 
   /*
-   * 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.
+   * Responsible for invoking tiler's `loadData` target, which
+   * handles creating tiles, using geojson-vt or supercluster as appropriate.
    */
-  async _updateWorkerData(data) {
-    const json = typeof data === 'function' ? await data().catch(() => {}) : data;
-    if (!json) {
-      throw new Error('no GeoJSON data');
+  async #updateTilerData() {
+    const { data, diff } = this.#pendingUpdate ?? {};
+    this.#pendingUpdate = undefined;
+    if (!(data || diff)) {
+      warn.once(`No data or diff provided to GeoJSONSource ${this.id}.`);
+      return this.data;
     }
-    const options = { ...this.workerOptions, data: json };
+    if (data) {
+      this.data = await loadJSON(data, this.id);
+      this.#dataUpdateable = updatableGeoJson(this.data, this.promoteId);
+    }
+    if (diff) {
+      if (!this.#dataUpdateable) {
+        throw new Error(`GeoJSONSource "${this.id}": GeoJSON data is not compatible with updateData`);
+      }
+      applySourceDiff(this.#dataUpdateable, diff, this.promoteId);
+      this.data = { type: 'FeatureCollection', features: Array.from(this.#dataUpdateable.values()) };
+    }
+    this.data = filterGeoJSON(this.data, this._options);
 
-    return await this.#worker.loadData(options);
+    const options = { ...this.workerOptions, data: this.data };
+    await this.#tiler.loadData(options);
+    return this.data;
   }
 
   async loadTile(tile) {
@@ -190,11 +243,12 @@ class GeoJSONSource extends Evented {
       pixelRatio: browser.devicePixelRatio,
       showCollisionBoxes: this.map.showCollisionBoxes,
       justReloaded: tile.workerID != null,
-      painter: this.map.painter
+      painter: this.map.painter,
+      promoteId: this.promoteId
     };
 
     tile.workerID ??= true;
-    const data = await this.#worker.loadTile(params).finally(() => tile.unloadVectorData());
+    const data = await this.#tiler.loadTile(params).finally(() => tile.unloadVectorData());
     if (!tile.aborted) {
       tile.loadVectorData(data, this.map.painter);
     }
@@ -217,4 +271,47 @@ class GeoJSONSource extends Evented {
   }
 }
 
-export default GeoJSONSource;
+/**
+ * Fetch and parse GeoJSON according to the given params.
+ *
+ * @param data Function loading GeoJSON dataor GeoJSON data directly. Must be provided.
+ * GeoJSON can be either an object or string literal to be parsed.
+ */
+async function loadJSON(data, source) {
+  if (typeof data === 'function') {
+    data = await data().catch(() => {});
+    if (!data) {
+      throw new Error('no GeoJSON data');
+    }
+  }
+  if (typeof data === 'string') {
+    try {
+      data = JSON.parse(data);
+    } catch {
+      throw new Error(`Input data given to '${source}' is not a valid GeoJSON object.`);
+    }
+  }
+  return data;
+}
+
+function filterGeoJSON(data, { filter }) {
+  if (!filter) {
+    return data;
+  }
+  const compiled = createExpression(filter, {
+    type: 'boolean',
+    'property-type': 'data-driven',
+    overridable: false,
+    transition: false
+  });
+  if (compiled.result === 'error') {
+    throw new Error(compiled.value.map(err => `${err.key}: ${err.message}`).join(', '));
+  }
+
+  const features = data.features.filter(feature => compiled.value.evaluate({ zoom: 0 }, feature));
+  return { type: 'FeatureCollection', features };
+}
+
+function updatableGeoJson(data, promoteId) {
+  return isUpdateableGeoJSON(data, promoteId) ? toUpdateable(data, promoteId) : false;
+}

package/src/source/geojson_source_diff.js

@@ -0,0 +1,148 @@
+function getFeatureId(feature, promoteId) {
+  return promoteId ? feature.properties[promoteId] : feature.id;
+}
+export function isUpdateableGeoJSON(data, promoteId) {
+  // null can be updated
+  if (data == null) {
+    return true;
+  }
+  // {} can be updated
+  if (data.type == null) {
+    return true;
+  }
+  // a single feature with an id can be updated, need to explicitly check against null because 0 is a valid feature id that is falsy
+  if (data.type === 'Feature') {
+    return getFeatureId(data, promoteId) != null;
+  }
+  // a feature collection can be updated if every feature has an id, and the ids are all unique
+  // this prevents us from silently dropping features if ids get reused
+  if (data.type === 'FeatureCollection') {
+    const seenIds = new Set();
+    for (const feature of data.features) {
+      const id = getFeatureId(feature, promoteId);
+      if (id == null) {
+        return false;
+      }
+      if (seenIds.has(id)) {
+        return false;
+      }
+      seenIds.add(id);
+    }
+    return true;
+  }
+  return false;
+}
+export function toUpdateable(data, promoteId) {
+  const result = new Map();
+  if (data == null || data.type == null) {
+    // empty result
+  } else if (data.type === 'Feature') {
+    result.set(getFeatureId(data, promoteId), data);
+  } else {
+    for (const feature of data.features) {
+      result.set(getFeatureId(feature, promoteId), feature);
+    }
+  }
+  return result;
+}
+// mutates updateable
+export function applySourceDiff(updateable, diff, promoteId) {
+  if (diff.removeAll) {
+    updateable.clear();
+  }
+  if (diff.remove) {
+    for (const id of diff.remove) {
+      updateable.delete(id);
+    }
+  }
+  if (diff.add) {
+    for (const feature of diff.add) {
+      const id = getFeatureId(feature, promoteId);
+      if (id != null) {
+        updateable.set(id, feature);
+      }
+    }
+  }
+  if (diff.update) {
+    for (const update of diff.update) {
+      let feature = updateable.get(update.id);
+      if (feature == null) {
+        continue;
+      }
+      // be careful to clone the feature and/or properties objects to avoid mutating our input
+      const cloneFeature = update.newGeometry || update.removeAllProperties;
+      // note: removeAllProperties gives us a new properties object, so we can skip the clone step
+      const cloneProperties =
+        !update.removeAllProperties &&
+        (update.removeProperties?.length > 0 || update.addOrUpdateProperties?.length > 0);
+      if (cloneFeature || cloneProperties) {
+        feature = { ...feature };
+        updateable.set(update.id, feature);
+        if (cloneProperties) {
+          feature.properties = { ...feature.properties };
+        }
+      }
+      if (update.newGeometry) {
+        feature.geometry = update.newGeometry;
+      }
+      if (update.removeAllProperties) {
+        feature.properties = {};
+      } else if (update.removeProperties?.length > 0) {
+        for (const prop of update.removeProperties) {
+          if (Object.prototype.hasOwnProperty.call(feature.properties, prop)) {
+            delete feature.properties[prop];
+          }
+        }
+      }
+      if (update.addOrUpdateProperties?.length > 0) {
+        for (const { key, value } of update.addOrUpdateProperties) {
+          feature.properties[key] = value;
+        }
+      }
+    }
+  }
+}
+export function mergeSourceDiffs(existingDiff, newDiff) {
+  if (!existingDiff) {
+    return newDiff ?? {};
+  }
+  if (!newDiff) {
+    return existingDiff;
+  }
+  const merged = { ...existingDiff };
+  if (newDiff.removeAll) {
+    merged.removeAll = true;
+  }
+  if (newDiff.remove) {
+    const removedSet = new Set(merged.remove ? merged.remove.concat(newDiff.remove) : newDiff.remove);
+    merged.remove = Array.from(removedSet.values());
+  }
+  if (newDiff.add) {
+    const combinedAdd = merged.add ? merged.add.concat(newDiff.add) : newDiff.add;
+    const addMap = new Map(combinedAdd.map(feature => [feature.id, feature]));
+    merged.add = Array.from(addMap.values());
+  }
+  if (newDiff.update) {
+    const updateMap = new Map(merged.update?.map(feature => [feature.id, feature]));
+    for (const feature of newDiff.update) {
+      const featureUpdate = updateMap.get(feature.id) ?? { id: feature.id };
+      if (feature.newGeometry) {
+        featureUpdate.newGeometry = feature.newGeometry;
+      }
+      if (feature.addOrUpdateProperties) {
+        featureUpdate.addOrUpdateProperties = (featureUpdate.addOrUpdateProperties ?? []).concat(
+          feature.addOrUpdateProperties
+        );
+      }
+      if (feature.removeProperties) {
+        featureUpdate.removeProperties = (featureUpdate.removeProperties ?? []).concat(feature.removeProperties);
+      }
+      if (feature.removeAllProperties) {
+        featureUpdate.removeAllProperties = true;
+      }
+      updateMap.set(feature.id, featureUpdate);
+    }
+    merged.update = Array.from(updateMap.values());
+  }
+  return merged;
+}