#Harmoware-VIS とは
#随時更新データを再生する方法
Harmoware-VIS を使用して移動体のリアルタイムの位置情報などを可視化する方法を解説します。
この機能は Harmoware-VIS のバージョン1.8.x以降でサポートします。
##処理イメージ
##各インターフェース
###setLocationData
Harmoware-VISの関数です。随時更新データを登録&更新します。
Harmoware-VIS内でidを識別して、新規idは「追加」し、既存idは「更新」します。
{ // 随時更新データのフォーマット例
id: 'xxxxxxxxxx', // 連続データであることを識別するための情報(必須項目) typeは任意なので文字列でも数字でもOK
elapsedtime: 9999999999, // 当該データの更新時刻(UNIX TIME 単位秒) 省略時は再生中時刻(※settime)又は再生PCのローカル時刻を設定
position: [999.999, 999.999, 999], // 当該データの更新時の位置(経緯度) 省略可
// ...その他の項目は任意で保持されます。
}
※settime 解説
参照
データにpositionがある場合はsourcePositionとtargetPositionに変換して付加します。
またデータ更新の際に方向(direction)を演算して付加します。
コード例
this.props.actions.setLocationData(data)
###setLocationDataOption
Harmoware-VISの関数です。随時更新データの再生に関するパラメータを更新する際に使用します。
-
locationMoveDuration(number)
- 位置指定(position)が移動した場合にアイコンを移動するアニメーションを継続する時間数(秒数)
- 省略時の規定値:1
※timebegin 解説
参照
※timelength 解説
参照
コード例
this.props.actions.setLocationDataOption({
locationMoveDuration : 2,
defaultAddTimeLength: 30,
remainingTime: 5
})
##使用例
//アプリのルートクラス
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
やtimeLength
は随時更新データ設定時に未設定でもOK
随時更新データ設定時に現在時刻より再生が開始します。
別途任意にtimeBegin
やtimeLength
を変更することも可能。
##注意事項
Harmoware-VISでは随時更新データの履歴は取得しないので、Harmoware-VISの機能では過去の再現再生は出来ません。
アプリ側で履歴を取得&編集するなどの対応をお願いします。