Harmoware-VIS APIリファレンス

#前提
Harmoware-VISについては別記事
「[Harmoware-VISの紹介](https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a)」
「[Harmoware-VIS はじめに](https://qiita.com/ucl_Harmoware_VIS/items/8cad0b3c7737a1996e81)」
をご覧ください。

# APIリファレンス
Harmoware-VISのAPIのリファレンスを解説します。

### Properties
ルートで受け取る「props」オブジェクト内の項目を以下に示します。

#### **`actions`**
以下のPropertiesを更新するためのメソッド群
詳細は各項目の欄を参照
<hr>

#### **`animatePause`**  (Boolean)<br>
・Default : false
trueでアニメーション一時停止。
falseでアニメーション再生。
値更新：`actions.setAnimatePause`
<hr>

#### **`animateReverse`** (Boolean)
・Default : false
trueでアニメーションを逆方向再生。
falseでアニメーションを正方向再生。
値更新：`actions.setAnimateReverse`
<hr>

#### **`bounds`** (Object)
・Default : **※後述**
シミュレーション領域の境界位置。
移動体データ設定時(`actions.setMovesBase`)に設定データ内のboundsをコピー
設定データ内にboundsが無い場合はDefault値のまま

**※boundsのDefault値**

<dl>
<dt>westlongitiude(number)</dt>
<dd>最西端の経度位置 Default : 0</dd>
<br>
<dt>eastlongitiude(number)</dt>
<dd>最東端の経度位置 Default : 0</dd>
<br>
<dt>southlatitude(number)</dt>
<dd>最南端の緯度位置 Default : 0</dd>
<br>
<dt>northlatitude(number)</dt>
<dd>最北端の緯度位置 Default : 0</dd>
</dl>
<hr>

#### **`defaultPitch`** (Number)
・Default : 30
視点ピッチ（角度）のデフォルト値。
値更新：`actions.setDefaultPitch`
値更新：`actions.setDefaultViewport`

```sample.js
actions.setDefaultViewport({defaultPitch:45, defaultZoom: 15})
```
<hr>

#### **`defaultZoom`** (Number)
・Default : 11.1
デフォルトのズーム値。
値更新：`actions.setDefaultViewport`
<hr>

#### **`depotsBase`** (Object Array)
・Default : []
停留場の位置情報の登録データフォーマット。
（Harmoware-VIS提供の「DepotsLayer」用のデータ）
値更新：`actions.setDepotsBase`

**※depotsBaseのフォーマット（setDepotsBaseで設定するデータのフォーマット）**

```sample.json
[ { "position": [999.9999, 999.9999, 999], ...anyKey, ・・・・・・ },・・・・・・ ]
or
[ { "longitude": 999.9999, "latitude": 99.9999, ...anyKey, ・・・・・・ },・・・・・・ ]
```

<dl>
<dt>position (number[], required)</dt>
<dd>停留場の位置情報 [ 経度、緯度、[標高] ]（標高は省略可）</dd>
<br>
<dt>longitude(number, optional)</dt>
<dd>停留場の位置情報 [ 経度 ]</dd>
<br>
<dt>latitude(number, optional)</dt>
<dd>停留場の位置情報 [ 緯度 ]</dd>
<br>
<dt>type (string, optional)</dt>
<dd>停留場の種別を識別する際に設定</dd>
<br>
<dt>...any key (any, optional)</dt>
<dd>必要に応じて設定。</dd>
</dl>
<hr>

#### **`depotsData`** (Object Array)
・Default : []
停留場の位置情報の表示データフォーマット。
`DepotsLayer`表示用データとして`depotsBase`を元に作成されます。
基本的に「depotsBaseのフォーマット」と同じフォーマット（※）ですが、`getDepotsOptionFunc`にコールバック関数を登録してカスタマイズが可能です。
※`depotsBase`での位置情報が`longitude`と`latitude`で定義されている場合は`position`に変換されます。

```sample.json
[ { "settime": 9999999999,
    "position": [999.9999, 999.9999, 999], ...anyKey, ・・・・・・ },・・・・・・ ]
```

<dl>
<dt>settime(number)</dt>
<dd>このdepotsDataを作成した時点のシミュレーション日時のUNIX時間（秒）を編集</dd>
<br>
<dt>position (number[])</dt>
<dd><code>depotsBase</code>より編集</dd>
<br>
<dt>...any key (any, optional)</dt>
<dd><code>depotsBase</code>の<code>position、longitude、latitude</code>以外の項目とコールバック関数（<code>getDepotsOptionFunc</code>）より編集</dd>
</dl>
<hr>

#### **`getDepotsOptionFunc`** (Function)
・Default : null
停留場情報の表示データをカスタマイズするコールバック関数を設定。
値更新：`actions.setDepotsOptionFunc`
**オプショングラフの動的更新時などで使用。**
コールバック関数の書式 `<P>(props: P, i: number) => object`
戻り値のobjectは`depotsData`生成時にマージされます。

<dl>
<dt>props(object)</dt>
<dd>最新のpropsデータ</dd>
<br>
<dt>i(number)</dt>
<dd><code>depotsBase</code>配列の処理中要素インデックス</dd>
</dl>
<hr>

#### **`getMovesOptionFunc`** (Function)
・Default : null
移動体情報の表示データをカスタマイズするコールバック関数を設定。
値更新：`actions.setMovesOptionFunc`
**オプショングラフの動的更新時などで使用。**
コールバック関数の書式 `<P>(props: P, i: number, j: number) => object`
戻り値のobjectは`movedData`生成時にマージされます。

<dl>
<dt>props(object)</dt>
<dd>最新のpropsデータ</dd>
<br>
<dt>i(number)</dt>
<dd><code>movesbase</code>配列の処理中要素インデックス</dd>
<br>
<dt>j(number)</dt>
<dd>movesbase配列の処理中要素のoperationの処理中要素インデックス<br>
つまり <code>movesbase[i].operation[j]</code> を指す</dd>
</dl>
<hr>

#### **`leading`** (Number)
・Default : 100
シミュレーション開始時刻の前に追加する空白時間（単位：秒）
値更新：`actions.setLeading`
<hr>

#### **`movesbase`** (Object Array)
・Default : []
移動体の経路情報のデータ。
**※movesbaseのフォーマット**

```sample.json
[   {   "type": "xxxxx",
        "movesbaseidx": 9999999999,
        "departuretime": 9999999999,
        "arrivaltime": 9999999999,
        "operation": [
            {   "elapsedtime": 9999999999,
                "position": [999.9999, 999.9999, 999],
                "direction": 999,
                ...anyKey, ・・・・・・
            },・・・・・・
        ], ...anyKey, ・・・・・・
    },・・・・・・
]
```

<dl>
<dt>type(string)</dt>
<dd>移動体の識別情報を編集（定義有無は元データによる）</dd>
<br>
<dt>movesbaseidx(number)</dt>
<dd><code>movesbase</code>配列のインデックス値を編集</dd>
<br>
<dt>departuretime(number)</dt>
<dd>移動体の出発時の<code>elapsedtime</code>の値をUNIX時間（秒）で編集</dd>
<br>
<dt>arrivaltime(number)</dt>
<dd>移動体の到着時の<code>elapsedtime</code>の値をUNIX時間（秒）で編集</dd>
<br>
<dt>operation(object[])</dt>
<dd>移動体のルートと経過時間を移動体毎の配列で設定</dd>
<br>
<dt>elapsedtime(number)</dt>
<dd><code>position</code>の通過時間をUNIX時間（秒）で設定</dd>
<br>
<dt>position (number[])</dt>
<dd>移動体の<code>elapsedtime</code>時点の位置情報 [ 経度、緯度、標高 ]</dd>
<br>
<dt>direction(number)</dt>
<dd>移動体の方向（角度）</dd>
<br>
<dt>...any key (any, required)</dt>
<dd><code>setMovesBase</code>などのデータ設定用のメソッドで設定したデータの項目より編集</dd>
</dl>

**※移動体の経路情報のデータ設定用のメソッド**
値更新：`actions.setMovesBase`
値更新：`actions.updateMovesBase`

**※設定するデータのフォーマット**

```sample.json
// フォーマット例１
{   "timeBegin": 9999999999, "timeLength": 99999, "elapsedtimeMode": "UNIXTIME",
    "bounds": {
        "northlatitude": 99.99999, "southlatitude": 99.99999, "westlongitiude" 999.99999, "eastlongitiude": 999.99999,
    },
    "movesbase": [
        {   "type": "xxxxx",
            "operation": [
                {   "elapsedtime": 99999,
                    "position": [999.9999, 999.9999, 999],
                    "longitude": 999.9999, "latitude": 99.999,
                    ...anyKey, ・・・・・・
                },・・・・・・
            ], ...anyKey, ・・・・・・
        },・・・・・・
    ], ...anyKey, ・・・・・・
}

// フォーマット例２
[   {   "type": "xxxxx",
        "operation": [
            {   "elapsedtime": 9999999999,
                "position": [999.9999, 999.9999, 999],
                "longitude": 999.9999, "latitude": 99.999,
                ...anyKey, ・・・・・・
            },・・・・・・
        ], ...anyKey, ・・・・・・
    },・・・・・・
]
```

<dl>
<dt>timeBegin(number, optional)</dt>
<dd>シミュレーション開始日時のUNIX時間（秒）</dd>
<br>
<dt>timeLength(number, optional)</dt>
<dd>シミュレーション開始から終了までの時間長（秒）</dd>
<br>
<dt>elapsedtimeMode(string, optional)</dt>
<dd><code>movesbase.operation</code>の<code>elapsedtime</code>をUNIX時間（秒）で指定する場合は"UNIXTIME"を設定</dd>
<br>
<dt>bounds(object, optional)</dt>
<dd>シミュレーションエリアの範囲宣言（東西南北端）</dd>
<br>
<dt>movesbase(object[], required)</dt>
<dd>移動体のルートと経過時間、識別情報などを設定</dd>
<br>
<dt>type(string, optional)</dt>
<dd>移動体の識別情報を設定</dd>
<br>
<dt>operation(object[], required)</dt>
<dd>移動体のルートと経過時間を移動体毎の配列で設定<br>
<code>elapsedtime</code>の値が異なる２個以上の要素が無い場合は表示対象外</dd>
<br>
<dt>elapsedtime(number, required)</dt>
<dd>フォーマット例１の場合は上記の<code>timeBegin</code>からの経過時間（秒）で設定<br>
但し、<code>timeBegin</code>が未定義の場合はUNIX時間（秒）で設定<br>
更に、<code>timeBegin</code>が定義済かつ<code>elapsedtimeMode</code>に"UNIXTIME"が定義済の場合はUNIX時間（秒）で設定<br>
フォーマット例２の場合はUNIX時間（秒）で設定</dd>
<br>
<dt>position (number[], required)</dt>
<dd>移動体の<code>elapsedtime</code>時点の位置情報 [ 経度、緯度、[標高] ]（標高は省略可）<br>
位置情報を<code>position</code>または<code>longitude-latitude</code>で指定<br>
<code>position</code>と<code>longitude-latitude</code>の両方が定義された場合は<code>position</code>を優先で採用</dd>
<br>
<dt>longitude(number, required)</dt>
<dd>移動体の<code>elapsedtime</code>時点の位置情報 [ 経度 ]</dd>
<br>
<dt>latitude(number, required)</dt>
<dd>移動体の<code>elapsedtime</code>時点の位置情報 [ 緯度 ]</dd>
<br>
<dt>...any key (any, required)</dt>
<dd>必要に応じて設定。</dd>
</dl>
<hr>

#### **`movedData`** (Object Array)
・Default : []
`MovesLayer`表示用データとして`movesbase`を元に作成されます。
**※movedDataのフォーマット**

```sample.json
[ { "settime": 9999999999,
    "movesbaseidx": 9999999999,
    "type": "xxxxx",
    "position": [999.9999, 999.9999, 999],
    "sourcePosition": [999.9999, 999.9999, 999],
    "targetPosition": [999.9999, 999.9999, 999],
    "direction": 999,
    "color": [999, 999, 999],
    "sourceColor": [999, 999, 999],
    "targetColor": [999, 999, 999],
    ...anyKey, ・・・・・・
  }, ・・・・・・
]
```

<dl>
<dt>settime(number)</dt>
<dd>この<code>movedData</code>を作成した時点のシミュレーション日時のUNIX時間（秒）を編集</dd>
<br>
<dt>movesbaseidx(number)</dt>
<dd>この<code>movedData</code>に対応する<code>movesbase</code>配列のインデックス値を編集</dd>
<br>
<dt>type(string)</dt>
<dd><code>movesbase</code>より編集（定義有無は<code>movesbase</code>による）</dd>
<br>
<dt>position (number[])</dt>
<dd><code>movesbase</code>より編集</dd>
<br>
<dt>sourcePosition(number[])</dt>
<dd>上記<code>position</code>と同値</dd>
<br>
<dt>targetPosition(number[])</dt>
<dd>次のデータの<code>position</code>と同値</dd>
<br>
<dt>direction(number)</dt>
<dd>移動体の方向（角度）</dd>
<br>
<dt>color(number[])</dt>
<dd><code>movesbase</code>より編集（未定義時は[0,255,0]:”green”）</dd>
<br>
<dt>sourceColor(number[])</dt>
<dd>上記<code>color</code>と同値</dd>
<br>
<dt>targetColor(number[])</dt>
<dd>次のデータの<code>color</code>と同値（未定義時は[0,255,0]:”green”）</dd>
<br>
<dt>...any key (any, optional)</dt>
<dd><code>setMovesBase</code>などのデータ設定用のメソッドで設定したデータの項目とコールバック関数（<code>getMovesOptionFunc</code>）より編集</dd>
</dl>
<hr>

#### **`ExtractedData`** (any)
・Default : undefined
`getExtractedDataFunc`関数で生成＆登録したデータ。
参考：[【Harmoware-VIS】組込みの移動データフォーマットを使用せず外部データで再生する方法](https://qiita.com/ucl_Harmoware_VIS/items/9a0a5d30a1c4e42ed373)
<hr>

#### **`getExtractedDataFunc`** (Function)
・Default : null
再生時の画面更新タイミングで表示させるデータを生成＆登録する関数。
値更新：`actions.setExtractedDataFunc`
**movesbaseではコントロールできないカスタムデータを処理する関数**
コールバック関数の書式 `<P>(props: P) => any`
戻り値の値がそのまま`ExtractedData`に設定されます。

<dl>
<dt>props(object)</dt>
<dd>最新のpropsデータ</dd>
</dl>
参考：[【Harmoware-VIS】組込みの移動データフォーマットを使用せず外部データで再生する方法](https://qiita.com/ucl_Harmoware_VIS/items/9a0a5d30a1c4e42ed373)
<hr>

#### **`locationBase`** (Object Array)
・Default : []
※v1.8.x以降
値更新：`actions.setLocationData`

```sample.js
actions.setLocationData(locationBase_Data)
```

**※setLocationDataで登録するデータのフォーマット**

```sample.json
{ "id": "xxxxxxxxxx", // 識別情報（必須）typeは任意
  "elapsedtime": 9999999999, // UNIX時間（秒）省略時は再生中の時間（settime）又はＰＣのローカル時刻
  "position": [999.9999, 999.9999, 999], // 経緯度情報 省略可
  ・・・・・・ // その他任意
}
```

locationBaseは「id」で識別されたデータの配列になります。
内部で保持の際にデータに"position"キーがある場合は"sourcePosition"、"targetPosition"、"direction"を生成するので予約キーとなります。
参考：[【Harmoware-VIS】随時更新データを再生する方法](https://qiita.com/ucl_Harmoware_VIS/items/ffcce22b65d5478489b9)
<hr>

#### **`locationData`** (Object Array)
・Default : []
※v1.8.x以降
`locationBase`よりレイヤー表示用に編集したデータ（Read only）
**※locationDataのフォーマット**

```sample.json
[ { "id": "xxxxxxxxxx", // 識別情報（必須）typeは任意
    "elapsedtime": 9999999999, // UNIX時間（秒）
    "position": [999.9999, 999.9999, 999], // 経緯度情報 locationBaseによる
    "sourcePosition": [999.9999, 999.9999, 999], // 経緯度情報 locationBaseによる
    "targetPosition": [999.9999, 999.9999, 999], // 経緯度情報 locationBaseによる
    "direction": 999, // 進行方向（度） locationBaseによる
    ・・・・・・ // その他任意
  }, ・・・・・・
]
```

参考：[【Harmoware-VIS】随時更新データを再生する方法](https://qiita.com/ucl_Harmoware_VIS/items/ffcce22b65d5478489b9)
<hr>

#### **`locationMoveDuration`** (Number)
・Default : 1
※v1.8.x以降
位置指定(position)が移動した場合にアイコンを移動するアニメーションを継続する時間数（秒数）
値更新：`actions.setLocationDataOption`

```sample.js
actions.setLocationDataOption({locationMoveDuration:2})
```

参考：[【Harmoware-VIS】随時更新データを再生する方法](https://qiita.com/ucl_Harmoware_VIS/items/ffcce22b65d5478489b9)
<hr>

#### **`defaultAddTimeLength`** (Number)
・Default : 60
※v1.8.x以降
再生時間が終端に到達した場合に延長する時間数（秒数）
値更新：`actions.setLocationDataOption`

```sample.js
actions.setLocationDataOption({defaultAddTimeLength:30})
```

参考：[【Harmoware-VIS】随時更新データを再生する方法](https://qiita.com/ucl_Harmoware_VIS/items/ffcce22b65d5478489b9)
<hr>

#### **`remainingTime`** (Number)
・Default : 10
※v1.8.x以降
再生時間延長を実施する残り時間（秒数）
値更新：`actions.setLocationDataOption`

```sample.js
actions.setLocationDataOption({remainingTime:5})
```

参考：[【Harmoware-VIS】随時更新データを再生する方法](https://qiita.com/ucl_Harmoware_VIS/items/ffcce22b65d5478489b9)
<hr>

#### **`clickedObject`** (Object Array)
・Default : null
クリックされた移動オブジェクト参照データの配列。
Harmoware-VIS標準機能で使用する情報。
クリックしたアイコンの情報を保持。
値更新：`actions.setClicked`
<hr>

#### **`routePaths`** (Object Array)
・Default : []
クリックされた移動オブジェクトの経路データの配列。
Harmoware-VIS標準機能で使用する情報。
クリックしたアイコンの経路情報を保持。
値更新：`actions.setRoutePaths`

**※routePathsのフォーマット**

```sample.json
[ { "movesbaseidx": 9999999999,
    "sourcePosition": [999.9999, 999.9999, 999],
    "targetPosition": [999.9999, 999.9999, 999],
    "routeColor": [999, 999, 999],
    "routeWidth": 999,
  }, ・・・・・・
]
```

<dl>
<dt>movesbaseidx(number)</dt>
<dd>この<code>routePaths</code>に対応する<code>movesbase</code>配列のインデックス値を編集</dd>
<br>
<dt>sourcePosition(number[])</dt>
<dd>線分始端位置 [ 経度、緯度、標高 ]</dd>
<br>
<dt>targetPosition(number[])</dt>
<dd>線分終端位置 [ 経度、緯度、標高 ]</dd>
<br>
<dt>routeColor(number[])</dt>
<dd>線分色</dd>
<br>
<dt>routeWidth(number)</dt>
<dd>線分幅（マップ縮尺でのメートル）</dd>
</dl>
<hr>

#### **`secperhour`** (Number)
・Default : 180
再生速度（秒/時）
値更新：`actions.setSecPerHour`
`secperhour`値を更新時には`multiplySpeed`値も対応する値に更新
参考：[【Harmoware-VIS】シミュレーションの再生速度の値を変更](https://qiita.com/ucl_Harmoware_VIS/items/676d769b2c930d12f6ed)
<hr>

#### **`multiplySpeed`** (Number)
・Default : 20
再生速度（倍速）
値更新：`actions.setMultiplySpeed`
`multiplySpeed`値を更新時には`secperhour`値も対応する値に更新
参考：[【Harmoware-VIS】シミュレーションの再生速度の値を変更](https://qiita.com/ucl_Harmoware_VIS/items/676d769b2c930d12f6ed)
<hr>

#### **`settime`** (Number)
・Default : 0
再生時間（UNIX時間）
再生時には再生時刻に自動で更新
任意の値に更新する場合は以下のメソッド使用
値更新：`actions.setTime`
値を加減算する場合は以下のメソッド使用（）
値更新：`actions.addMinutes`

```sample.js
actions.addMinutes(10) // 指定の単位は分
```
<hr>

#### **`timeBegin`** (Number)
・Default : 0
シミュレーション開始時刻（UNIX時間）
移動体の経路情報のデータ設定時に自動で設定
間接更新：`actions.setMovesBase`
間接更新：`actions.updateMovesBase`
任意の値に更新する場合は以下のメソッド使用
値更新：`actions.setTimeBegin`
<hr>

#### **`timeLength`** (Number)
・Default : 0
シミュレーション時間長（秒）
移動体の経路情報のデータ設定時に自動で設定
`timeBegin`値の時刻より`timeLength`後がシミュレーション終了時刻
間接更新：`actions.setMovesBase`
間接更新：`actions.updateMovesBase`
任意の値に更新する場合は以下のメソッド使用
値更新：`actions.setTimeLength`
<hr>

#### **`trailing`** (Number)
・Default : 180
シミュレーション終了後に追加する空白時間（単位：秒）
値更新：`actions.setTrailing`
<hr>

#### **`viewport`** (Object)
・Default : ※後述
マップ表示の視点情報（ビューポート）を指定
値更新：`actions.setViewport`

**※viewportのDefault値**

<dl>
<dt>longitude(number,option)</dt>
<dd>マップ表示中心経度 Default : 136.906428</dd>
<br>
<dt>latitude(number,option)</dt>
<dd>マップ表示中心経度 Default : 136.906428</dd>
<br>
<dt>zoom(number,option)</dt>
<dd>マップ表示ズーム値 Default : 11.1</dd>
<br>
<dt>maxZoom(number,option)</dt>
<dd>マップ表示ズーム最大値 Default : 18</dd>
<br>
<dt>minZoom(number,option)</dt>
<dd>マップ表示ズーム最小値 Default : 5</dd>
<br>
<dt>pitch(number,option)</dt>
<dd>マップ表示視点角度値 Default : 30</dd>
<br>
<dt>bearing(number,option)</dt>
<dd>マップ表示視点方角値 Default : 0</dd>
<br>
<dt>transitionDuration(number,option)</dt>
<dd>マップ表示視点移動時間（ミリ秒） Default : 0<br>
マップ位置移動時にかける時間（ミリ秒）を設定。<br>
ゼロ以上の場合は移動がアニメーション化する</dd>
<br>
<dt>...any key (any, optional)</dt>
<dd>その他<code>react-map-gl</code>で扱う視点情報</dd>
</dl>
参考：[【Harmoware-VIS】アプリ起動時に表示する地図の位置や視点の設定](https://qiita.com/ucl_Harmoware_VIS/items/edf4a537109dec9efc2f)
<hr>

#### **`linemapData`** (Object)
・Default : []
線画`LineMapLayer`表示用データフォーマット
値更新：`actions.setLinemapData`

**※linemapDataのフォーマット**

```sample.json
[  // LineLayer
   { "sourcePosition": [999.9999, 999.9999, 999],
     "targetPosition": [999.9999, 999.9999, 999],
     "color": [999, 999, 999],
     "strokeWidth": 999,
   },・・・・・・
   // PathLayer
   { "path": [[999.9999, 999.9999, 999],
              [999.9999, 999.9999, 999]・・・・・・],
     "dash ": [5,2],
     "color": [999, 999, 999],
     "strokeWidth": 999,
   },・・・・・・
   // PolygonLayer(3D)
   { "polygon": [[999.9999, 999.9999, 999],
                 [999.9999, 999.9999, 999]・・・・・・],
     "elevation ": 999, // 3-D object height
     "color": [999, 999, 999],
   },・・・・・・
   // PolygonLayer(2D)
   { "coordinates":[[999.9999, 999.9999, 999],
                    [999.9999, 999.9999, 999]・・・・・・],
     "color": [999, 999, 999],
   },・・・・・・
]
```

<dl>
<dt>sourcePosition(number[],option)</dt>
<dd><code>LineMapLayer</code>内の<code>LineLayer</code>で表示する直線始端位置 [ 経度、緯度、標高 ]</dd>
<br>
<dt>targetPosition(number[],option)</dt>
<dd><code>LineMapLayer</code>内の<code>LineLayer</code>で表示する直線終端位置 [ 経度、緯度、標高 ]</dd>
<br>
<dt>color(number[],option)</dt>
<dd>線分色</dd>
<br>
<dt>path(number[][],option)</dt>
<dd><code>LineMapLayer</code>内の<code>PathLayer</code>で表示する線分パス情報（[ 経度、緯度、標高 ]の配列）</dd>
<br>
<dt>polygon(number[][],option)</dt>
<dd><code>LineMapLayer</code>内の<code>PolygonLayer</code>（3D）で表示する線分パス情報（[ 経度、緯度、標高 ]の配列）</dd>
<br>
<dt>coordinates(number[][],option)</dt>
<dd><code>LineMapLayer</code>内の<code>PolygonLayer</code>（2D）で表示する線分パス情報（[ 経度、緯度、標高 ]の配列）</dd>
<br>
<dt>elevation(number,option)</dt>
<dd><code>LineMapLayer</code>内の<code>PolygonLayer</code>で表示する高さ情報</dd>
<br>
<dt>strokeWidth(number,option)</dt>
<dd><code>LineMapLayer</code>内の<code>LineLayer</code>と<code>PathLayer</code>で表示する線幅情報（マップ縮尺でのメートル）</dd>
<br>
<dt>dash(number[],option)</dt>
<dd><code>LineMapLayer</code>内の<code>PathLayer</code>で表示する破線指示（[dashSize, gapSize]の配列）<br>
破線指示情報の設定値の詳細は<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/extensions/path-style-extension.md">こちら</a></dd>
</dl>
<hr>

#### **`loading`** (Boolean)
・Default : false
trueで読み込み中のアイコンを表示。
（Harmoware-VIS提供の`LoadingIcon`を使用時に有効）
値更新：`actions.setLoading`
<hr>

#### **`inputFileName`** (Object)
・Default : {}
画面表示用の入力ファイル名（※後述）
Harmoware-VIS提供の`MovesInput``DepotsInput``LinemapInput`コンポーネントを用いてファイルデータを読み込んだ場合にファイル名を設定
ユーザで別のファイルを使用する際に使用しても構いません。
値更新：`actions.setInputFilename`

```sample.js
actions.setInputFilename({customFileName:"xxxxxxxxxx.xxx"})
```

```sample.json
{ "movesFileName": "xxxxxxxxxx.json",
  "depotsFileName": "xxxxxxxxxx.json",
  "linemapFileName": "xxxxxxxxxx.json",
}
```

<dl>
<dt>movesFileName(number[],option)</dt>
<dd><code>MovesInput</code>コンポーネントでファイルを読み込んだ場合にファイル名を設定</dd>
<br>
<dt>depotsFileName(number[],option)</dt>
<dd><code>DepotsInput</code>コンポーネントでファイルを読み込んだ場合にファイル名を設定</dd>
<br>
<dt>linemapFileName(number[],option)</dt>
<dd><code>LinemapInput</code>コンポーネントでファイルを読み込んだ場合にファイル名を設定</dd>
</dl>
<hr>

#### **`noLoop`** (Boolean)
・Default : false
trueでシミュレーション終了後に一時停止する。（ループしない）
値更新：`actions.setNoLoop`
<hr>

#### **`initialViewChange`** (Boolean)
・Default : true
trueで移動体データを読み込んだ後、マップ表示の視点をデータ群の平均的な中心位置に移動
falseの場合は移動体データを読み込み後、マップ表示の視点移動しない（そのまま）
値更新：`actions.setInitialViewChange`
<hr>

#### **`iconGradation`** (Boolean)
・Default : false
trueで移動体アイコンのカラー（movedData）変更を経過時間で遷移するグラデーション化
⇒Ａ地点（赤指定）→Ｂ地点へ（青指定）の場合、Ａ→Ｂ移動中に徐々に色が変化
falseの場合、Ｂ地点到着まで赤のままで到着すると青に変化
値更新：`actions.setIconGradationChange`
<hr>

### getConfigureStore
・v1.8.10～
reduxjs/toolkitのconfigureStoreを使用しHarmoware-VISのリデューサ関数を含めたstoreを取得します。
また、引数にリデューサ関数を追加で記述することで、Harmoware-VISのリデューサ関数と統合することができます。

```sample.js
import { render } from 'react-dom';
import { getConfigureStore } from 'harmoware-vis';
import { Provider } from 'react-redux';
import React from 'react';
import App from './containers';
import 'harmoware-vis/scss/harmoware.scss';

// 個別リデューサ関数の追加がない場合
const store = getConfigureStore();

// 個別リデューサ関数を追加する場合の例
import customReducer from './customReducer';
const store = getConfigureStore({customReducer});

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);
```

<hr>

### getCombinedReducer
reduxのcreateStoreに渡すことができるHarmoware-VISのリデューサ関数を取得します。
また、引数にリデューサ関数を追加で記述することで、Harmoware-VISのリデューサ関数と統合することができます。
※reduxのcreateStoreは非推奨に変更されました。

```sample.js
import { render } from 'react-dom';
import { getCombinedReducer } from 'harmoware-vis';
import { createStore } from 'redux';

import { Provider } from 'react-redux';
import React from 'react';
import App from './containers';
import 'harmoware-vis/scss/harmoware.scss';

// 個別リデューサ関数の追加がない場合
const store = createStore(getCombinedReducer());

// 個別リデューサ関数を追加する場合の例
import customReducer from './customReducer';
const store = createStore(getCombinedReducer({customReducer}));

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);
```

<hr>

### Container
React.Componentを継承したクラスです。
Harmoware-VISライブラリのベースとなるコンポーネントで、settimeとanimation frameを更新します。
renderメソッドでDOMを出力してください。

```sample.js
// using mapbox
import React from 'react';
import {
  Container, connectToHarmowareVis, HarmoVisLayers, ...
} from 'harmoware-vis';

class App extends Container {
  render() {
    const { viewport, actions, ... } = this.props;
    return (
      <HarmoVisLayers
        viewport={viewport}  actions={actions}
        mapboxApiAccessToken={ ... } layers={[ ... ]}
      />
    );
  }
}
export default connectToHarmowareVis(App);
```

<hr>

### connectToHarmowareVis
connectToHarmowareVisの状態をコンテナ・コンポーネントのpropに同期させるためのUtilityです。

```sample.js
import { Container, connectToHarmowareVis } from 'harmoware-vis';

class App extends Container {
    ・・・
}

// 追加のアクションが無い場合
export default connectToHarmowareVis(App);

// 追加のアクションが有る場合
import * as moreActions from '../actions';
export default connectToHarmowareVis(App, moreActions);
```

<hr>

### HarmoVisLayers
deck.glのLayerクラスを継承したレイヤーを、mapboxで取得した地図上に表示します。

```sample.js
<HarmoVisLayers
  viewport={this.props.viewport} actions={this.props.actions}
  mapboxApiAccessToken={MAPBOX_TOKEN}
  layers={ [ ... ] }
  mapGlComponents={ this.getComponentsDom(this.props.movedData) } // Example
/>
```

<dl>
<dt>visible(Boolean,option)</dt>
<dd>・Default : true<br>
trueの場合地図レイヤーを表示</dd>
<br>
<dt>actions(object,required)</dt>
<dd>Propertiesの<code>actions</code>を設定<br>
APIリファレンスは<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions">リンク先</a>を参照</dd>
<br>
<dt>viewport(object,required)</dt>
<dd>Propertiesの<code>viewport</code>を設定<br>
APIリファレンスは<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#viewport-object">リンク先</a>を参照</dd>
<dt>mapboxApiAccessToken(string,required)</dt>
<dd>mapbox.comのアクセストークンを設定<br>
但し、上記<code>visible</code>でfalseを設定した場合は有効なアクセストークンである必要はない</dd>
<br><dt>mapStyle(string,option)</dt>
<dd>・Default : 'mapbox://styles/mapbox/dark-v8'<br>
style URL を設定（Mapboxの style URL の情報は<a href="https://docs.mapbox.com/api/maps/styles/#mapbox-styles">リンク先</a>を参照）</dd>
<br>
<dt>layers(array,required)</dt>
<dd>レイヤーインスタンスの配列<br>
レイヤーは、deck.glの<code>Layer</code>クラスを継承したレンダリングコンポーネントです。</dd>
<br>
<dt>onViewportChange(Function,option)</dt>
<dd>・Default : Propertiesの<code>actions</code>の<code>setViewport</code><br>
viewportを更新するインターフェスを設定</dd>
<br>
<dt>mapGlComponents(any,option)</dt>
<dd>・Default : null<br>
"react-map-gl" カスタムデータ追加インターフェース<br>
カスタムデータ追加に関する情報は”react-map-gl”の<a href="https://github.com/visgl/react-map-gl/blob/master/docs/get-started/adding-custom-data.md">リンク先</a>を参照</dd>
<br>
<dt>mapboxAddLayerValue(mapboxgl.Layer[],option)</dt>
<dd>・Default : ※下記参照<br>
Mapboxマップに重ねるレイヤーを設定<br>
Mapboxマップに重ねるレイヤーに関する情報は<a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/">リンク先</a>を参照</dd>
</dl>
```mapboxAddLayerValue_Default.json
[{	"id": "3d-buildings",
	"source": "composite",
	"source-layer": "building",
	"filter": ["==", "extrude", "true"],
	"type": "fill-extrusion",
	"paint": {
		"fill-extrusion-color": "#888",
		"fill-extrusion-height": ["interpolate", ["linear"], ["zoom"], 5, 0, 5.05, ["get", "height"]],
		"fill-extrusion-base": ["interpolate", ["linear"], ["zoom"], 5, 0, 5.05, ["get", "min_height"]],
		"fill-extrusion-opacity": 0.6
	},
},{	"id": "sky",
	"type": "sky",
	"paint": {
		"sky-type": "atmosphere",
		"sky-atmosphere-sun": [180.0, 60.0],
		"sky-atmosphere-sun-intensity": 5
	}
}]
```
<dl>
<dt>mapboxAddSourceValue(object {id:string, source:object}[],option)</dt>
<dd>・Default : undefined<br>
Mapboxマップに重ねるソースを設定<br>
Mapboxマップに重ねるソースに関する情報は<a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/">リンク先</a>を参照</dd>
<br>
<dt>terrain(Boolean,option)</dt>
<dd>・Default : false<br>
trueで３Ⅾ地形表示（下記<code>terrainSource</code>と<code>setTerrain</code>のデータを使用）<br>
Mapboxでの３Ⅾ地形表示に関する情報は<a href="https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/">リンク先</a>を参照</dd>
<br>
<dt>terrainSource(object{id:string,source:object},option)</dt>
<dd>・Default : ※下記参照</dd>
</dl>
```terrainSource_Default.js
{  id:'mapbox-dem',
   source:{
     'type': 'raster-dem',
     'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
}}
```
<dl>
<dt>setTerrain(object { source:string,	exaggeration?:number},option)</dt>
<dd>・Default : ※下記参照</dd>
</dl>
```setTerrain_Default.js
{source:'mapbox-dem'}
```
<dl>
<dt>deckGLProps(object {any}, option) ⇒ v1.8.7～</dt>
<dd>・Default : {}</dd>
</dl>
DeckGL に追加するプロパティを指定<br>
<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/react/deckgl.md">参考ドキュメント</a>
<dl>
</dl>

# Layersリファレンス
Harmoware-VISのLayersリファレンスについては別記事「[Harmoware-VIS Layersリファレンス](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1)」をご覧ください。