使用 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
});

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

Stopping deck.gl's viewstate transition with transitionInterruption

vue.js

deck.gl