More than 1 year has passed since last update.

Harmoware-VIS APIリファレンス

Last updated at 2022-05-25Posted at 2021-11-30

#前提
Harmoware-VISについては別記事
「Harmoware-VISの紹介」
「Harmoware-VIS はじめに」
をご覧ください。

APIリファレンス

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

Properties

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

`actions`

以下のPropertiesを更新するためのメソッド群
詳細は各項目の欄を参照

`animatePause` (Boolean)

・Default : false
trueでアニメーション一時停止。
falseでアニメーション再生。
値更新：actions.setAnimatePause

`animateReverse` (Boolean)

・Default : false
trueでアニメーションを逆方向再生。
falseでアニメーションを正方向再生。
値更新：actions.setAnimateReverse

`bounds` (Object)

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

※boundsのDefault値

westlongitiude(number): 最西端の経度位置 Default : 0
eastlongitiude(number): 最東端の経度位置 Default : 0
southlatitude(number): 最南端の緯度位置 Default : 0
northlatitude(number): 最北端の緯度位置 Default : 0

`defaultPitch` (Number)

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

sample.js

actions.setDefaultViewport({defaultPitch:45, defaultZoom: 15})

`defaultZoom` (Number)

・Default : 11.1
デフォルトのズーム値。
値更新：actions.setDefaultViewport

`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, ・・・・・・ },・・・・・・ ]

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

`depotsData` (Object Array)

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

sample.json

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

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

`getDepotsOptionFunc` (Function)

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

props(object): 最新のpropsデータ
i(number): depotsBase配列の処理中要素インデックス

`getMovesOptionFunc` (Function)

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

props(object): 最新のpropsデータ
i(number): movesbase配列の処理中要素インデックス
j(number): movesbase配列の処理中要素のoperationの処理中要素インデックス
つまり movesbase[i].operation[j] を指す

`leading` (Number)

・Default : 100
シミュレーション開始時刻の前に追加する空白時間（単位：秒）
値更新：actions.setLeading

`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, ・・・・・・
    },・・・・・・
]

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

※移動体の経路情報のデータ設定用のメソッド
値更新：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, ・・・・・・
    },・・・・・・
]

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

`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, ・・・・・・
  }, ・・・・・・
]

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

`ExtractedData` (any)

・Default : undefined
getExtractedDataFunc関数で生成＆登録したデータ。
参考：【Harmoware-VIS】組込みの移動データフォーマットを使用せず外部データで再生する方法

`getExtractedDataFunc` (Function)

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

props(object): 最新のpropsデータ

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

`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】随時更新データを再生する方法

`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】随時更新データを再生する方法

`locationMoveDuration` (Number)

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

sample.js

actions.setLocationDataOption({locationMoveDuration:2})

参考：【Harmoware-VIS】随時更新データを再生する方法

`defaultAddTimeLength` (Number)

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

sample.js

actions.setLocationDataOption({defaultAddTimeLength:30})

参考：【Harmoware-VIS】随時更新データを再生する方法

`remainingTime` (Number)

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

sample.js

actions.setLocationDataOption({remainingTime:5})

参考：【Harmoware-VIS】随時更新データを再生する方法

`clickedObject` (Object Array)

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

`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,
  }, ・・・・・・
]

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

`secperhour` (Number)

・Default : 180
再生速度（秒/時）
値更新：actions.setSecPerHour
secperhour値を更新時にはmultiplySpeed値も対応する値に更新
参考：【Harmoware-VIS】シミュレーションの再生速度の値を変更

`multiplySpeed` (Number)

・Default : 20
再生速度（倍速）
値更新：actions.setMultiplySpeed
multiplySpeed値を更新時にはsecperhour値も対応する値に更新
参考：【Harmoware-VIS】シミュレーションの再生速度の値を変更

`settime` (Number)

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

sample.js

actions.addMinutes(10) // 指定の単位は分

`timeBegin` (Number)

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

`timeLength` (Number)

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

`trailing` (Number)

・Default : 180
シミュレーション終了後に追加する空白時間（単位：秒）
値更新：actions.setTrailing

`viewport` (Object)

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

※viewportのDefault値

longitude(number,option): マップ表示中心経度 Default : 136.906428
latitude(number,option): マップ表示中心経度 Default : 136.906428
zoom(number,option): マップ表示ズーム値 Default : 11.1
maxZoom(number,option): マップ表示ズーム最大値 Default : 18
minZoom(number,option): マップ表示ズーム最小値 Default : 5
pitch(number,option): マップ表示視点角度値 Default : 30
bearing(number,option): マップ表示視点方角値 Default : 0
transitionDuration(number,option): マップ表示視点移動時間（ミリ秒） Default : 0
マップ位置移動時にかける時間（ミリ秒）を設定。
ゼロ以上の場合は移動がアニメーション化する
...any key (any, optional): その他react-map-glで扱う視点情報

参考：[【Harmoware-VIS】アプリ起動時に表示する地図の位置や視点の設定](https://qiita.com/ucl_Harmoware_VIS/items/edf4a537109dec9efc2f)

`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],
   },・・・・・・
]

sourcePosition(number[],option): LineMapLayer内のLineLayerで表示する直線始端位置 [ 経度、緯度、標高 ]
targetPosition(number[],option): LineMapLayer内のLineLayerで表示する直線終端位置 [ 経度、緯度、標高 ]
color(number[],option): 線分色
path(number[][],option): LineMapLayer内のPathLayerで表示する線分パス情報（[ 経度、緯度、標高 ]の配列）
polygon(number[][],option): LineMapLayer内のPolygonLayer（3D）で表示する線分パス情報（[ 経度、緯度、標高 ]の配列）
coordinates(number[][],option): LineMapLayer内のPolygonLayer（2D）で表示する線分パス情報（[ 経度、緯度、標高 ]の配列）
elevation(number,option): LineMapLayer内のPolygonLayerで表示する高さ情報
strokeWidth(number,option): LineMapLayer内のLineLayerとPathLayerで表示する線幅情報（マップ縮尺でのメートル）
dash(number[],option): LineMapLayer内のPathLayerで表示する破線指示（[dashSize, gapSize]の配列）
破線指示情報の設定値の詳細はこちら

`loading` (Boolean)

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

`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",
}

movesFileName(number[],option): MovesInputコンポーネントでファイルを読み込んだ場合にファイル名を設定
depotsFileName(number[],option): DepotsInputコンポーネントでファイルを読み込んだ場合にファイル名を設定
linemapFileName(number[],option): LinemapInputコンポーネントでファイルを読み込んだ場合にファイル名を設定

`noLoop` (Boolean)

・Default : false
trueでシミュレーション終了後に一時停止する。（ループしない）
値更新：actions.setNoLoop

`initialViewChange` (Boolean)

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

`iconGradation` (Boolean)

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

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')
);

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')
);

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);

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);

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
/>

visible(Boolean,option): ・Default : true
trueの場合地図レイヤーを表示
actions(object,required): Propertiesのactionsを設定
APIリファレンスはリンク先を参照
viewport(object,required): Propertiesのviewportを設定
APIリファレンスはリンク先を参照
mapboxApiAccessToken(string,required): mapbox.comのアクセストークンを設定
但し、上記visibleでfalseを設定した場合は有効なアクセストークンである必要はない
mapStyle(string,option): ・Default : 'mapbox://styles/mapbox/dark-v8'
style URL を設定（Mapboxの style URL の情報はリンク先を参照）
layers(array,required): レイヤーインスタンスの配列
レイヤーは、deck.glのLayerクラスを継承したレンダリングコンポーネントです。
onViewportChange(Function,option): ・Default : PropertiesのactionsのsetViewport
viewportを更新するインターフェスを設定
mapGlComponents(any,option): ・Default : null
"react-map-gl" カスタムデータ追加インターフェース
カスタムデータ追加に関する情報は”react-map-gl”のリンク先を参照
mapboxAddLayerValue(mapboxgl.Layer[],option): ・Default : ※下記参照
Mapboxマップに重ねるレイヤーを設定
Mapboxマップに重ねるレイヤーに関する情報はリンク先を参照

```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 } }] ```

mapboxAddSourceValue(object {id:string, source:object}[],option): ・Default : undefined
Mapboxマップに重ねるソースを設定
Mapboxマップに重ねるソースに関する情報はリンク先を参照
terrain(Boolean,option): ・Default : false
trueで３Ⅾ地形表示（下記terrainSourceとsetTerrainのデータを使用）
Mapboxでの３Ⅾ地形表示に関する情報はリンク先を参照
terrainSource(object{id:string,source:object},option): ・Default : ※下記参照

```terrainSource_Default.js { id:'mapbox-dem', source:{ 'type': 'raster-dem', 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1', }} ```

setTerrain(object { source:string, exaggeration?:number},option): ・Default : ※下記参照

```setTerrain_Default.js {source:'mapbox-dem'} ```

deckGLProps(object {any}, option) ⇒ v1.8.7～: ・Default : {}

DeckGL に追加するプロパティを指定
参考ドキュメント

Layersリファレンス

Harmoware-VISのLayersリファレンスについては別記事「Harmoware-VIS Layersリファレンス」をご覧ください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Harmoware-VIS APIリファレンス

APIリファレンス

Properties

actions

animatePause (Boolean)

animateReverse (Boolean)

bounds (Object)

defaultPitch (Number)

defaultZoom (Number)

depotsBase (Object Array)

depotsData (Object Array)

getDepotsOptionFunc (Function)

getMovesOptionFunc (Function)

leading (Number)

movesbase (Object Array)

movedData (Object Array)

ExtractedData (any)

getExtractedDataFunc (Function)

locationBase (Object Array)

locationData (Object Array)

locationMoveDuration (Number)

defaultAddTimeLength (Number)

remainingTime (Number)

clickedObject (Object Array)

routePaths (Object Array)

secperhour (Number)

multiplySpeed (Number)

settime (Number)

timeBegin (Number)

timeLength (Number)

trailing (Number)

viewport (Object)

linemapData (Object)

loading (Boolean)

inputFileName (Object)

noLoop (Boolean)

initialViewChange (Boolean)

iconGradation (Boolean)

getConfigureStore

getCombinedReducer

Container

connectToHarmowareVis

HarmoVisLayers

Layersリファレンス

`actions`

`animatePause` (Boolean)

`animateReverse` (Boolean)

`bounds` (Object)

`defaultPitch` (Number)

`defaultZoom` (Number)

`depotsBase` (Object Array)

`depotsData` (Object Array)

`getDepotsOptionFunc` (Function)

`getMovesOptionFunc` (Function)

`leading` (Number)

`movesbase` (Object Array)

`movedData` (Object Array)

`ExtractedData` (any)

`getExtractedDataFunc` (Function)

`locationBase` (Object Array)

`locationData` (Object Array)

`locationMoveDuration` (Number)

`defaultAddTimeLength` (Number)

`remainingTime` (Number)

`clickedObject` (Object Array)

`routePaths` (Object Array)

`secperhour` (Number)

`multiplySpeed` (Number)

`settime` (Number)

`timeBegin` (Number)

`timeLength` (Number)

`trailing` (Number)

`viewport` (Object)

`linemapData` (Object)

`loading` (Boolean)

`inputFileName` (Object)

`noLoop` (Boolean)

`initialViewChange` (Boolean)

`iconGradation` (Boolean)