拖动地图时，整层要素白闪一下

现象

按住拖动时，矢量图层整体消失约 100 毫秒，松手后重新出现。 要素越密集，消失时间越长。性能面板显示每帧都在执行 VectorLayer.renderFrame，单帧耗时超过 30 ms。

原因

updateWhileInteracting: true 让图层在拖动过程中每帧重绘。 canvas 渲染器每次重绘前会清空自身画布，8000 个要素重新执行样式函数、 重新绘制，一帧画不完，就出现“先白后补”的过程。

默认值 false 时不会闪，但拖动过程中要素停在原地， 与底图脱节，看起来像“图层没跟着走”。

排查过程

1. 把 updateWhileInteracting 关掉，确认白闪消失。
2. 统计要素数量与样式函数耗时，判断是数据量问题还是样式问题。
3. 看是否开启了 declutter，它会在每次重绘时重排所有标签。

console.log('要素数', source.getFeatures().length);
var t0 = performance.now();
source.getFeatures().forEach(function (f) { layer.getStyleFunction()(f, 1); });
console.log('样式耗时 ms', performance.now() - t0);

解决方案

数据量在几千以内，保留实时重绘但降低单帧成本：样式共享、关闭 declutter、 关闭不必要的动画更新：

var layer = new ol.layer.Vector({
  source: source,
  style: sharedStyle,
  updateWhileInteracting: true,
  updateWhileAnimating: false,
  declutter: false
});

数据量大时改用 WebGL 点图层，绘制成本与要素数量关系很弱。 样式改为表达式，交互期仍保持流畅：

var style = {
  'circle-radius': 4,
  'circle-fill-color': ['get', 'color'],
  'circle-stroke-width': 0
};

var layer = new ol.layer.WebGLPoints({
  source: source,
  style: style
});

只能用 canvas 且必须实时重绘时，把要素按类别拆成多个图层， 只让变化频繁的那一层实时更新，其余保持默认：

var staticLayer = new ol.layer.Vector({
  source: baseSource,
  style: baseStyle
});

var dynamicLayer = new ol.layer.Vector({
  source: liveSource,
  style: sharedStyle,
  updateWhileInteracting: true
});

验证

连续拖动 5 秒，图层不再整体消失，只可能出现局部延迟。 松手后画面立即稳定，不需要等待重绘。 性能面板中拖动期间单帧耗时低于 16 ms。