Mapコンポーネントの関数コンポーネント化

[gunsow911]

概要

components/Map/index.tsxにて

  let map: Map;
  let deck: Deck;
  let visLayers: visiblyLayers;

が関数外で定義されており、関数コンポーネントにも関わらず、状態を持ってしまっています。

結果、状態を持つdeckへのレイヤーリストの参照や登録が各所で行われるようになっており、Menuに所属していないレイヤーの登録が非常に難しい構造になってしまっています。

目的

上記状態をすべて関数内に入れるようにして、関数コンポーネントとして扱いたいです。

提案内容

Mapコンポーネントのレンダー部分を

<DeckGL
    initialViewState={<ビュー初期状態>}
    controller={true}
    layers={<レイヤーリスト>}
>
...
</DeckGL>

に変更し、レイヤーリストは関数内からフィルタリングするようにします。
実装イメージ

let layers = menulayers; // メニュー全体のレイヤー
layers = filterUnchecked(layers); // チェックされていないレイヤーをフィルタリング
layers  = filterZoom(layers); // ズームの範囲から外れているレイヤーをフィルタリング

このように扱うことで、もし外部からレイヤーが必要になった際(例えばダッシュボード)は、処理を差し込めばよいだけになります。

layers = mergeDashboard(layers); // ダッシュボードに所属するレイヤーのマージ

let layers = menulayers; // メニュー全体のレイヤー
layers = filterUnchecked(layers); // チェックされていないレイヤーをフィルタリング
if (config.useDashbord) { // ダッシュボード設定が有効であれば
  layers = mergeDashboard(layers); // ダッシュボードに所属するレイヤーのマージ
}
layers  = filterZoom(layers); // ズームの範囲から外れているレイヤーをフィルタリング

deckが参照/設定するレイヤーリストを1元化することで、柔軟なレイヤーの取得が可能になると思われます。

Mapコンポーネントをかなり書き換えることになると思います。
私(@gunsow911 )の方で、一旦実証コードを作ってみたいと思います。