前提
Harmoware-VISについては別記事
「Harmoware-VISの紹介」
「Harmoware-VIS はじめに」
「Harmoware-VIS APIリファレンス」
「Harmoware-VIS Layersリファレンス」
をご覧ください。
Control component リファレンス
Harmoware-VIS の Control component のリファレンスを解説します。
MovesInput
MovesInputでは、movesbaseのファイルを選択するダイアログが表示されます。
ファイルを読み込んだ後、bounds、timeBegin、timeLength、movesbaseをHarmoware-VISのプロパティに設定します。
movesbaseの更新にはactions.setMovesBaseを使用します。
更にinputFileNameプロパティのmovesFileNameに入力ファイルの名前を設定します。
| 表示サンプル |
|---|
 |
Examples.js
<MovesInput actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティのactionsを設定（必須）
- i18n(Object option)
- ・Default :
{formatError: 'データ形式不正'}
フォーマットエラー発生時のアラートキャプションをi18n.formatErrorに設定 - id(string option)
- htmlタグの属性ID
- className(Object option)
- htmlタグ属性クラス
- style(Object option)
- htmlタグの属性スタイル
DepotsInput
DepotsInputでは、depotsBaseのファイルを選択するダイアログが表示されます。
ファイルを読み込んだ後、depotsBaseをHarmoware-VISのプロパティに設定します。
depotsBaseの更新にはactions.setDepotsBaseを使用します。
更にinputFileNameプロパティのdepotsFileNameに入力ファイルの名前を設定します。
| 表示サンプル |
|---|
|
|
Examples.js
<DepotsInput actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティのactionsを設定（必須）
- i18n(Object option)
- ・Default :
{formatError: 'データ形式不正'}
フォーマットエラー発生時のアラートキャプションをi18n.formatErrorに設定 - id(string option)
- htmlタグの属性ID
- className(Object option)
- htmlタグ属性クラス
- style(Object option)
- htmlタグの属性スタイル
LinemapInput
LinemapInputでは、linemapDataのファイルを選択するダイアログが表示されます。
ファイルを読み込んだ後、linemapDataをHarmoware-VISのプロパティに設定します。
linemapDataの更新にはactions.setLinemapDataを使用します。
更にinputFileNameプロパティのlinemapFileNameに入力ファイルの名前を設定します。
| 表示サンプル |
|---|
|
|
Examples.js
<LinemapInput actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティのactionsを設定（必須）
- i18n(Object option)
- ・Default :
{formatError: 'データ形式不正'}
フォーマットエラー発生時のアラートキャプションをi18n.formatErrorに設定 - id(string option)
- htmlタグの属性ID
- className(Object option)
- htmlタグ属性クラス
- style(Object option)
- htmlタグの属性スタイル
LoadingIcon
LoadingIconは、プロパティのloadingがtrueの場合に画面中央に読み込み中のアイコンを表示します。
| 表示サンプル |
|---|
 |
Examples.js
<LoadingIcon loading={this.props.loading} />
- loading(boolean required)
- 通常はHarmoware-VISのプロパティの
loadingを設定（必須） - color(string option)
- ・Default :
'white'
'#XXXXXX'または'#XXX'の形式のカラーハッシュを受け付けます。
また、以下のような基本的な色も受け取ることができます。
maroon, red, orange, yellow, olive, green, purple, white, fuchsia, lime, teal, aqua, blue, navy, black, gray, silver
AddMinutesButton
AddMinutesButtonは、プロパティのaddMinutesに設定された値（分）で、Harmoware-VIS のプロパティのsettimeを更新するボタンを表示します。
| 表示サンプル |
|---|
 |
Examples.js
<AddMinutesButton addMinutes={-5} actions={this.props.actions} />
<AddMinutesButton addMinutes={5} actions={this.props.actions} />
- addMinutes(number required)
- ・Default : 10
settimeに加算する値（単位：分）を設定（必須） - actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - children(React.ReactNode option)
- ・Default : （※上記表示サンプルのデータ）
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{minutesCaption: '️min'}
ボタンの単位キャプションをi18n.minutesCaptionに設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
ElapsedTimeRange
ElapsedTimeRangeは、Harmoware-VIS のプロパティのsettimeを表示＆更新するスライダーを表示します。
表示する値はシミュレーション開始時間（timeBegin）から経過時間（settime）を差し引いた秒数です。
| 表示サンプル |
|---|
 |
Examples.js
<ElapsedTimeRange settime={this.props.settime} timeBegin={this.props.timeBegin}
timeLength={this.props.timeLength} actions={this.props.actions} />
- settime(number required)
- 通常はHarmoware-VISのプロパティの
settimeを設定（必須） - timeBegin(number required)
- 通常はHarmoware-VISのプロパティの
timeBeginを設定（必須） - timeLength(number required)
- 通常はHarmoware-VISのプロパティの
timeLengthを設定（必須） - actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - min(number option)
- ・Default : -100
timeBeginを基準時間（ゼロ）とした場合のスライダー範囲の最小値（秒） - step(number option)
- ・Default : 1
スライダーの更新単位（秒） - id(string option)
- htmlタグの属性ID
- className(Object option)
- ・Default :
'harmovis_input_range'
htmlタグ属性クラス
ElapsedTimeValue
ElapsedTimeValueは、Harmoware-VIS のプロパティのsettimeを表示＆更新するテキストBOXを表示します。
表示する値はシミュレーション開始時間（timeBegin）から経過時間（settime）を差し引いた秒数です。
| 表示サンプル |
|---|
|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<ElapsedTimeValue settime={this.props.settime} timeBegin={this.props.timeBegin}
timeLength={this.props.timeLength} actions={this.props.actions} />
- settime(number required)
- 通常はHarmoware-VISのプロパティの
settimeを設定（必須） - timeBegin(number required)
- 通常はHarmoware-VISのプロパティの
timeBeginを設定（必須） - timeLength(number required)
- 通常はHarmoware-VISのプロパティの
timeLengthを設定（必須） - actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - min(number option)
- ・Default : -100
timeBeginを基準時間（ゼロ）とした場合のスライダー範囲の最小値（秒） - id(string option)
- htmlタグの属性ID
- className(Object option)
- ・Default :
'harmovis_input_number'
htmlタグ属性クラス
PauseButton
PauseButtonは、Harmoware-VIS のプロパティのanimatePauseをtrueに更新するボタンを表示します。
| 表示サンプル |
|---|
 |
Examples.js
<PauseButton actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - children(React.ReactNode option)
- ・Default : （※上記表示サンプルのデータ）
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{pauseButtonCaption: 'PAUSE'}
ボタンのキャプションをi18n.pauseButtonCaptionに設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
PlayButton
PlayButtonは、Harmoware-VIS のプロパティのanimatePauseをfalseに更新するボタンを表示します。
| 表示サンプル |
|---|
 |
Examples.js
<PlayButton actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - children(React.ReactNode option)
- ・Default : （※上記表示サンプルのデータ）
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{playButtonCaption: '️PLAY'}
ボタンのキャプションをi18n.playButtonCaptionに設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
ForwardButton
ForwardButtonは、Harmoware-VIS のプロパティのanimateReverseをfalseに更新するボタンを表示します。
| 表示サンプル |
|---|
 |
Examples.js
<ForwardButton actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - children(React.ReactNode option)
- ・Default : （※上記表示サンプルのデータ）
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{forwardButtonCaption: '️FORWARD'}
ボタンのキャプションをi18n.forwardButtonCaptionに設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
ReverseButton
ReverseButtonは、Harmoware-VIS のプロパティのanimateReverseをtrueに更新するボタンを表示します。
| 表示サンプル |
|---|
 |
Examples.js
<ReverseButton actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - children(React.ReactNode option)
- ・Default : （※上記表示サンプルのデータ）
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{reverseButtonCaption: '️REVERSE'}
ボタンのキャプションをi18n.reverseButtonCaptionに設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
NavigationButton
NavigationButtonは、Harmoware-VIS のプロパティのviewportを更新するボタンを表示します。
| 表示サンプル |
|---|
|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<NavigationButton buttonType="compass"
actions={this.props.actions} viewport={this.props.viewport} />
<NavigationButton buttonType="zoom-in"
actions={this.props.actions} viewport={this.props.viewport} />
<NavigationButton buttonType="zoom-out"
actions={this.props.actions} viewport={this.props.viewport} />
- buttonType(string required)
- （必須）
buttonType Description 'compass' viewportのzoom値とpitch値をデフォルト値に更新（視点リセット） 'zoom-in' viewportのzoom値を0.5加算して更新（ズームイン） 'zoom-out' viewportのzoom値を0.5減算して更新（ズームアウト） - actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - viewport(Viewport required)
- 通常はHarmoware-VISのプロパティの
viewportを設定（必須） - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
SimulationDateTime
SimulationDateTimeは、Harmoware-VIS のプロパティのsettimeを指定の日付書式で表示テキストBOXを表示します。
| 表示サンプル |
|---|
|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<SimulationDateTime settime={settime} />
// output example (ja-JP) => 1970/01/01(木) 9:00:00
- settime(number required)
- 通常はHarmoware-VISのプロパティの
settimeを設定（必須） - caption(string option)
- ・Default : ''
書式日付の前方に付加するキャプション - locales(string option)
- ・Default : 'ja-JP'
書式言語ロケール指定
localesとoptionsの詳細はJavascriptの Date.prototype.toLocaleString() のリファレンス を参照 - options(Object option)
- ・Default :
{ year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit',
weekday: 'short' }
書式言語オプション指定
localesとoptionsの詳細はJavascriptの Date.prototype.toLocaleString() のリファレンス を参照 - className(Object option)
- htmlタグ属性クラス
SpeedRange
SpeedRangeは、Harmoware-VIS のプロパティのsecperhour又はmultiplySpeedを表示＆更新するスライダーを表示します。
secperhour表示中の値はMAX値とMIN値を入れ替えた値になります。（既定では 3600 ⇒ 1 又は 1 ⇒ 3600）
| 表示サンプル |
|---|
|
|
Examples.js
<SpeedRange secperhour={this.props.secperhour} actions={this.props.actions} />
<SpeedRange multiplySpeed={this.props.multiplySpeed} actions={this.props.actions} />
- secperhour(number required)
- 通常はHarmoware-VISのプロパティの
secperhourを設定（必須）
※secperhourかmultiplySpeedのどちらかを設定 - multiplySpeed(number required)
- 通常はHarmoware-VISのプロパティの
multiplySpeedを設定（必須）
※secperhourかmultiplySpeedのどちらかを設定 - actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - maxsecperhour(number option)
- ・Default : 3600
secperhourのスライダー範囲の最大値 - maxmultiplySpeed(number option)
- ・Default : 3600
multiplySpeedのスライダー範囲の最大値 - min(number option)
- ・Default : -100
スライダー範囲の最小値 - step(number option)
- ・Default : 1
スライダーの更新単位 - id(string option)
- htmlタグの属性ID
- className(Object option)
- ・Default :
'harmovis_input_range'
htmlタグ属性クラス
SpeedValue
SpeedValueは、Harmoware-VIS のプロパティのsecperhour又はmultiplySpeedを表示＆更新するテキストBOXを表示します。
| 表示サンプル |
|---|
|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<SpeedValue secperhour={this.props.secperhour} actions={this.props.actions} />
<SpeedValue multiplySpeed={this.props.multiplySpeed} actions={this.props.actions} />
- secperhour(number required)
- 通常はHarmoware-VISのプロパティの
secperhourを設定（必須）
※secperhourかmultiplySpeedのどちらかを設定 - multiplySpeed(number required)
- 通常はHarmoware-VISのプロパティの
multiplySpeedを設定（必須）
※secperhourかmultiplySpeedのどちらかを設定 - actions(object required)
- 通常はHarmoware-VISのプロパティの
actionsを設定（必須） - maxsecperhour(number option)
- ・Default : 3600
secperhourのスライダー範囲の最大値 - maxmultiplySpeed(number option)
- ・Default : 3600
multiplySpeedのスライダー範囲の最大値 - min(number option)
- ・Default : 1
スライダー範囲の最小値 - id(string option)
- htmlタグの属性ID
- className(Object option)
- ・Default :
'harmovis_input_number'
htmlタグ属性クラス
FpsDisplay
FpsDisplayは、FPS情報ウィンドウを表示します。
| 表示サンプル |
|---|
|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<FpsDisplay />
- width(number option)
- ・Default : 60
FPS情報ウィンドウの幅 - height(number option)
- ・Default : 40
FPS情報ウィンドウの高さ - colorCode(string option)
- ・Default : '#00FF00'
FPS情報ウィンドウのグラフのバーの色 - className(Object option)
- ・Default :
'harmovis_fpsRate'
htmlタグ属性クラス - UnitCaption(string option)
- ・Default : 'fps'
FPS単位のキャプション
css リファレンス
Harmoware-VIS の css リファレンスについては別記事「Harmoware-VIS css リファレンス」をご覧ください。