Deck.gl学习笔记（四）一个完整的视角切换与Control实战

      今天接到了一个小需求，deck.gl中的control在视角切换时通常是鼠标右键拖拽去进行平移页面，鼠标左键拖拽去进行旋转页面，这个操作习惯于three.js恰恰相反，部门中其他技术栈使用的都是three，因此这对用户的体验不友好，需要将页面控制兼容成three.js一样的鼠标左键拖拽去进行平移页面，鼠标右键拖拽去进行旋转页面。

      刚刚接到这个需求的时候，第一时间想到的是能否将鼠标左右键的默认事件转换，但是这又要重写很多逻辑，我们在控制页面视角转换时还是优先考虑用deck.gl

      因此查看文档的时候发现了一个惊喜的类：Control！

      通过自定义这个类去完成这个需求真是刚刚好，那么问题又来了，deck.gl功能虽然很强大，但是文档可真不咋滴，因此还是需要去查看他的源码才能确定如何用最少的代码去实现功能，不然就要重写很多拖拽旋转的逻辑了。

在control中终于让我发现了一个宝贝的函数handleEvent

这个函数在事件触发的时候执行，因此我们只需要重写这个函数就能实现自己的的功能！！！

import {
  OrbitController,
} from 'deck.gl';
//.........你的代码

class MyOrbitController extends OrbitController {
  handleEvent(event) {
    if (event.leftButton && !event.rightButton) {
      event.leftButton = false;
      event.rightButton = true;
    } else if (!event.leftButton && event.rightButton) {
      event.leftButton = true;
      event.rightButton = false;
    }
    super.handleEvent(event);
  }
}

//.........你的代码
setViewState(viewState) {
    if (viewState) {
      this.viewState = Object.assign(this.viewState, viewState);
      this.deckgl.setProps({
        viewState: { ...this.viewState },
        views: 
          new OrbitView({
              controller: { type: MyOrbitController },
            })
      });
    }
  }

setViewState在每次视角更新时触发进行视角切换。