使用transitionInterruption停止deck.gl的视图状态转换

Question

我将vue与deck.gl结合使用，在视图状态转换期间，它一直播放直到转换完成，即使被中断也是如此。

初始化卡片组：

this.deck = new Deck({
  canvas: 'deck-canvas',
  width: '100%',
  height: '100%',
  initialViewState: this.initialViewState,
  controller: true,
  onViewStateChange: ({ viewState }) => {
    this.map.jumpTo({
      center: [viewState.longitude, viewState.latitude],
      zoom: viewState.zoom,
      bearing: viewState.bearing,
      pitch: viewState.pitch,
    });
  },
});

创建新的视图过渡：

this.deck.setProps({
  viewState: {
    ...predefinedCameraPosition,
    transitionInterpolator: new FlyToInterpolator(),
    transitionDuration: 2000,
    transitionInterruption: this.deck._onViewStateChange.bind(this)
  }
})

我希望过渡会在用户中断时停止。

Answer 1

Turns out another function was manipulating deck.gl's layer state. Updating the viewState at the same time fixed this.

this.deck.setProps({
  layers: [...this.deckLayers],
  viewState: this.deck.viewState
});