【Harmoware-VIS】移動体データに移動体以外のデータを設定

#Harmoware-VIS とは

#移動体データに移動体以外のデータを設定

Harmoware-VIS では移動体データ（movesbase）より、時間経過に沿った移動をシミュレーションしますが、移動処理対象としないが時間経過によって表示を更新するためのデータを設定することが出来ます。

利用用途はいろいろありますが、例えば３Ｄポリゴンを時間経過でレイヤー表示することで、ビルがどんどん増えていく表現とか、建築進捗の表現とか、２Ⅾ範囲を時間経過でレイヤー表示することで、地区ごとの電力消費量の変化とか、何かの影響が時間経過により拡散する様子を表現したり出来ると思います。

[ //移動体データの配列
    //移動処理対象のデータ
    {"operation": [ //移動経路データ配列
            {"elapsedtime": 99999,
            "position": [999.9999, 999.9999, 999.9999], //positionが定義されると移動処理対象
            ・・・ //その他の情報
            },・・・
        ]
    },
    {"operation": [ //移動経路データ配列
            {"elapsedtime": 99999, //必須
            "polygon": [[999.9999, 999.9999, 999.9999],
                        [999.9999, 999.9999, 999.9999],
                        [999.9999, 999.9999, 999.9999], ・・・ ],
            ・・・ //positionが定義されないと移動処理対象外
            },・・・
        ]
    },・・・・・・
]

Harmoware-VIS のプロパティに含まれる movedData には、シミュレーション中の時間における移動対象データと移動対象外のデータが抽出されています。
MovesLayer は position が含まれない movedData は無視しますので、 movedData より position 以外で必要なデータを抽出してレイヤーで表示してください。

以下に移動体データへ polygon を追加した場合のコードのサンプルを示します。（細かい部分は省略）

  render() {
    const { movedData } = this.props;
    const polygonData = movedData.filter((x:any)=>x.polygon);
    return (
      <div>
          <HarmoVisLayers
              ・・・ //省略
            layers={
              new MovesLayer({ //こちらは移動処理対象のデータを表示
                movedData,
                ・・・ //省略
              }),
              polygonData.length > 0  ?
              new PolygonLayer({ //PolygonLayerはdeck.glの提供レイヤー
                id: 'PolygonLayer',
                data: polygonData, //movedDataから抽出したデータ
                getPolygon: (x: any) => x.polygon,
                getFillColor: (x: any) => x.color || [255,255,255,255],
                getElevation: (x: any) => x.elevation || 1,
              }):null
            )}
          />
      </div>
    );
  }