MapBox JS中Feature Properties数据异常膨胀问题求助

核心矛盾拆解 #

你碰到的问题本质是两个反常现象：

• 明明创建Feature时传入的coordinates和altitudes都是16个元素的数组，调用queryRenderedFeatures后，geometry.coordinates仍保留16个元素，但properties.jeremys（直接赋值自coordinates）却变成了15KB的全量数据
• 非代码主动修改的前提下，自定义属性被异常扩容

可能原因及对应解决办法 #

1. 数组引用导致的意外修改 #

数组是引用类型，你直接把同一个coordinates数组同时赋值给geometry.coordinates和properties.jeremys，后续任何对该数组的修改（包括Mapbox内部异步处理逻辑）都会同步影响两个字段。

解决办法：给properties里的数组创建独立拷贝，切断引用关联：

const feature: Feature = {
  type: 'Feature',
  id: uniqueId,
  geometry: {
    type: 'LineString',
    coordinates,
  },
  properties: {
    isSelected,
    operationColor: opColor,
    altitudes: [...altitudes], // 浅拷贝，适用于坐标为基础类型的场景
    jeremys: [...coordinates],
    // 若坐标是嵌套对象，用深拷贝：JSON.parse(JSON.stringify(coordinates))
  },
};

2. Mapbox几何自动简化机制 #

Mapbox渲染矢量图层时，会根据当前地图缩放级别自动对几何图形做简化/抽稀处理，减少渲染点数以提升性能——这就是geometry.coordinates只剩16个元素的原因。

而properties字段默认会保留你传入的原始数据。如果你的coordinates数组在创建Feature后被意外追加了全量数据（比如其他异步逻辑修改了原数组），就会导致properties.jeremys变成全量。

验证方式：在创建Feature后立刻打印feature.properties.jeremys.length，确认此时是否已经是全量数据。如果是，说明代码在创建Feature后修改了原coordinates数组。

3. 数据源配置的潜在影响 #

如果是将Feature添加到Mapbox的GeoJSON数据源中，检查数据源配置：

• 若设置了maxzoom或simplify参数，Mapbox会在不同缩放级别生成不同精度的几何数据，但properties始终保留原始值
• 确认没有通过transformRequest或其他自定义逻辑修改Feature数据

额外排查点 #

• 验证uniqueId是否真的唯一，避免多个同ID的Feature被添加到图层，导致查询时返回了其他Feature的全量数据
• 在queryRenderedFeatures结果中打印feature.id，确认返回的确实是你创建的目标Feature

内容的提问来源于stack exchange，提问作者Jeremy Thompson