地图一动，deck.gl 图层就漂走

现象

拖动地图时，deck.gl 图层跟随移动但存在延迟，松手后才对齐。 缩放到 12 级以上，图层与底图的偏移可达几十像素。 在移动端惯性滑动时最明显。

原因

deck.gl 与 MapLibre 各自维护相机。手动在 move 事件里 deck.setProps({ viewState })，事件回调落后于地图渲染帧， 就产生了“追帧”的漂移。

另一类是容器层级：deck.gl 的 canvas 独立叠在地图上方， 地图的 CSS transform 或 padding 会让两者基准点不同。

排查过程

1. 看是否用了 MapboxOverlay；如果自己 new Deck 并手动同步，几乎必然漂移。
2. 在 moveend 对比 map.getCenter() 与 deck.viewState 的中心值。
3. 检查地图容器是否有 transform: scale() 之类的动画。

console.log('maplibre', map.getCenter(), map.getZoom());
console.log('deck', deck.viewState.longitude, deck.viewState.latitude, deck.viewState.zoom);

解决方案

用 MapboxOverlay 作为地图控件挂载，让 deck.gl 直接复用地图相机， 不再手动传 viewState：

var overlay = new deck.MapboxOverlay({
  interleaved: false,
  layers: [
    new deck.ScatterplotLayer({
      id: 'stations',
      data: stations,
      getPosition: function (d) { return [d.lng, d.lat]; },
      getRadius: 8,
      radiusUnits: 'pixels'
    })
  ]
});

map.addControl(overlay);
map.on('load', function () {
  overlay.setProps({ layers: buildLayers() });
});

需要 3D 建筑与 deck.gl 图层共享深度时用 interleaved: true， 但要求图层样式与 MapLibre 的渲染管线兼容，且必须在地图 load 之后挂载：

map.on('load', function () {
  var overlay = new deck.MapboxOverlay({
    interleaved: true,
    layers: buildLayers()
  });
  map.addControl(overlay);
});

确实要自己管理 Deck 实例时，把相机同步放到 render 之前， 并用 viewState 的完整字段，缺 pitch、bearing 会只同步一半：

function syncView() {
  var c = map.getCenter();
  deck.setProps({
    viewState: {
      longitude: c.lng,
      latitude: c.lat,
      zoom: map.getZoom(),
      pitch: map.getPitch(),
      bearing: map.getBearing()
    }
  });
}
map.on('move', syncView);

验证

拖动、缩放、旋转过程中，图层与底图始终贴合，松手后无回弹。 在 18 级放大下，一个已知点位的像素坐标与底图标注一致。 移动端惯性滑动结束后，map.getCenter() 与 deck 视图中心一致。