【Harmoware-VIS】随時更新データを再生する方法（v1.8～サポート）

#Harmoware-VIS とは

https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a

#随時更新データを再生する方法
Harmoware-VIS を使用して移動体のリアルタイムの位置情報などを可視化する方法を解説します。
この機能は Harmoware-VIS のバージョン1.8.x以降でサポートします。
##処理イメージ
<img width="1648" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/9d4aa7c4-75bf-4d9d-4ccc-34be965e9482.png">

##各インターフェース

###setLocationData
Harmoware-VISの関数です。随時更新データを登録＆更新します。
Harmoware-VIS内でidを識別して、新規idは「追加」し、既存idは「更新」します。

```json-doc
{  // 随時更新データのフォーマット例
  id: 'xxxxxxxxxx', // 連続データであることを識別するための情報（必須項目） typeは任意なので文字列でも数字でもOK
  elapsedtime: 9999999999, // 当該データの更新時刻(UNIX TIME 単位秒) 省略時は再生中時刻（※settime）又は再生PCのローカル時刻を設定
  position: [999.999, 999.999, 999], // 当該データの更新時の位置（経緯度） 省略可
  // ...その他の項目は任意で保持されます。
}
```
※[`settime 解説`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number) 参照

データにpositionがある場合はsourcePositionとtargetPositionに変換して付加します。
またデータ更新の際に方向（direction）を演算して付加します。

コード例

```javascript
this.props.actions.setLocationData(data)
```


###setLocationDataOption
Harmoware-VISの関数です。随時更新データの再生に関するパラメータを更新する際に使用します。

* **locationMoveDuration**(number)
    * 位置指定(position)が移動した場合にアイコンを移動するアニメーションを継続する時間数（秒数）
    * 省略時の規定値：1
<img width="1648" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/d3797c10-68f8-80f9-14e9-4f4d6ebcbaee.png">
* **defaultAddTimeLength**(number)
    * 再生時間が終端に到達した場合に延長する時間数（秒数）
    * 省略時の規定値：60
* **remainingTime**(number)
    * 再生時間延長を実施する残り時間（秒数）
    * 省略時の規定値：10
<img width="1648" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/a83e4e09-9117-8445-d1d2-a62ece8fadee.png">

※[`timebegin 解説`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number) 参照
※[`timelength 解説`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timelength-number) 参照

コード例

```javascript
this.props.actions.setLocationDataOption({
    locationMoveDuration : 2,
    defaultAddTimeLength: 30,
    remainingTime: 5
})
```

##使用例

```javascript
//アプリのルートクラス
class App extends Container {
  ・・・
  // 随時更新データを外部から受信する関数
  receiveData(data){
    const id = data.type; // idの設定
    this.props.actions.setLocationData({...data,id})
  }
  ・・・
  render() {
    const { actions, viewport, locationData } = this.props;
    return (
    <div>
        <div className="harmovis_area">
          <HarmoVisLayers
            viewport={viewport} actions={actions}
            mapboxApiAccessToken={MAPBOX_TOKEN}
            layers={[
              locationData && (locationData.length > 0) ?
                new MovesLayer({
                  movedData:locationData,
                  ・・・ //省略
                })
            ]}
          />
       </div>
    </div>
  );
}
```

[`timeBegin`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number)や[`timeLength`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timelength-number)は随時更新データ設定時に未設定でもOK
随時更新データ設定時に現在時刻より再生が開始します。
別途任意に[`timeBegin`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number)や[`timeLength`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timelength-number)を変更することも可能。

##注意事項
Harmoware-VISでは随時更新データの履歴は取得しないので、Harmoware-VISの機能では過去の再現再生は出来ません。
アプリ側で履歴を取得＆編集するなどの対応をお願いします。