vue.js - 使用 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

结果发现另一个函数是操纵deck.gl 的图层状态。同时更新 viewState 解决了这个问题。

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