Deck.gl学习笔记（四）视角切换

背景：

最近在工作中遇到了一个需求需要切换deck.gl中的视角切换，需要控制相机视角分别看向其左视图、右视图、俯视图和背视图。

仔细看了文档发现主要是通过控制deck.gl的viewState去实现，话不多说直接上代码

import React, { useState } from 'react';
import { DeckGL, MapView } from 'deck.gl';
import { StaticMap } from 'react-map-gl';

const INITIAL_VIEW_STATE = {
  longitude: -100,
  latitude: 40,
  zoom: 4,
  pitch: 0,
  bearing: 0
};

function MapComponent() {
  const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);

  const handleViewStateChange = ({ viewState }) => {
    setViewState(viewState);
  };

  const toggleView = () => {
    setViewState((prev) => ({
      ...prev,
      longitude: prev.longitude === -100 ? 0 : -100,
      latitude: prev.latitude === 40 ? 30 : 40,
      zoom: prev.zoom === 4 ? 6 : 4,
      pitch: prev.pitch === 0 ? 45 : 0,
      bearing: prev.bearing === 0 ? 90 : 0,
    }));
  };

  return (
    <div>
      <button onClick={toggleView}>切换视角</button>
      <DeckGL
        viewState={viewState}
        onViewStateChange={handleViewStateChange}
        layers={[]} // Add your layers here
      >
        <MapView id="map" width="100%" height="100%">
          <StaticMap mapboxApiAccessToken={"YOUR_MAPBOX_TOKEN"} />
        </MapView>
      </DeckGL>
    </div>
  );
}

export default MapComponent;

当然这只是一个简单的例子，实际我们在3D数据可视化开发中不会在这里维护视角切换，例如，如果要做一个类似视频播放的控件，一辆车在0-90秒内由一处地点X开向另一 地点Y，而相机始终在这辆车的俯视面，这个效果又怎么做呢？

这个时候我们往往会用到单例模式，通过手动维护一个renderer的实例去开发。

也就是往往需要定义一个updateViewState的函数进行动态的相机视角切换，updateViewState传入的参数可以是时刻t1->t2的视角偏移viewOffset，

updateViewState(Offset) {
    const viewState = this.getView(Offset);
    this.setViewState(viewState);
  }

而这里的getView就要通过传参去设置，根据业务场景不同写下不同的逻辑

setViewState通常就是viewState传入再通过deck.gl的setProps去更新视角，在一章仔细讲