如何在DeckGL中实现缩放结束时触发setViewState函数？

可以利用DeckGL控制器的onInteractionEnd事件实现需求，这个事件会在**拖拽、缩放（滚轮/ pinch）**等交互操作结束时触发，刚好覆盖你需要的场景。同时通过对比视图状态的关键参数（纬度、经度、缩放级别），避免不必要的重复请求。

具体实现步骤： #

• 替换原有的onDragEnd为onInteractionEnd，该事件能捕获所有交互结束的动作
• 在回调中对比当前viewState与新的viewport的latitude、longitude、zoom值，只有当其中任一参数发生变化时，才执行状态更新和数据库请求

修改后的代码示例： #

return (
  <DeckGL
    layers={layers}
    initialViewState={viewState}
    effects={[lightingEffect]}
    controller={true}
    onInteractionEnd={(info, evt) => {
      const newViewport = info.viewport;
      // 对比关键参数是否变化
      const hasChanged = 
        viewState.latitude !== newViewport.latitude ||
        viewState.longitude !== newViewport.longitude ||
        viewState.zoom !== newViewport.zoom;

      if (hasChanged) {
        setViewState(newViewport);
        // 这里添加你的数据库请求逻辑
        // fetch('/api/update-view', { method: 'POST', body: JSON.stringify(newViewport) })
      }
    }}
    onClick={(e) => {
      if (e.object) {
        setSelected(e.object.properties.id);
      }
    }}>
  ...
  </DeckGL>
);

补充说明： #

• onInteractionEnd是DeckGL底层控制器（默认MapController）提供的事件，包含了所有交互结束的场景，比单独监听onDragEnd覆盖范围更广
• 通过参数对比过滤掉无意义的状态更新，确保只有当视图的核心参数变化时才触发请求，避免频繁调用接口

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