Harmoware-VIS Layersリファレンス

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

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

<hr>
##Base Layer properties.
以降で解説するHarmoware-VISの[`MovesLayer`](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1#moveslayer)と[`DepotsLayer`](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1#depotslayer)と[`LineMapLayer`](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1#linemaplayer)はdeck.glのLayer Classを継承しています。
deck.glのLayer Classの詳細は<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/core/layer.md">リンク先</a>を参照

<hr>
##MovesLayer
MovesLayer は車両などの移動体をアイコンとしてレンダリングします。
MovesLayer は`HarmoVisLayers`のためのレイヤーです。
`HarmoVisLayers`の詳細は<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#harmovislayers">リンク先</a>を参照

```Examples.js
<HarmoVisLayers ...
  layers={[
    new MovesLayer( { routePaths: this.props.routePaths,
      movesbase: this.props.movesbase,
      movedData: this.props.movedData,
      clickedObject: this.props.clickedObject,
      actions: this.props.actions
    })
  ]}
/>
```

<dl>
<dt>clickedObject(Array,required)</dt>
<dd>Base Layer propertiesの<code>pickable</code>をfalseに設定した場合は省略可<br>
アイコンクリック時の経路描画に必要<br>
通常はHarmoware-VISのPropertiesの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#clickedobject-object-array"><code>clickedObject</code></a>を設定<br>
設定内容はHarmoware-VISで編集</dd>
<br>
<dt>routePaths(Array,required)</dt>
<dd>Base Layer propertiesの<code>pickable</code>をfalseに設定した場合は省略可<br>
アイコンクリック時の経路描画に必要<br>
通常はHarmoware-VISのPropertiesの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#routepaths-object-array"><code>routePaths</code></a>を設定<br>
設定内容はHarmoware-VISで編集</dd>
<br>
<dt>actions(object,required)</dt>
<dd>Base Layer propertiesの<code>pickable</code>をfalseに設定した場合は省略可<br>
アイコンクリック時の経路描画に必要<br>
通常はHarmoware-VISのPropertiesの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#actions"><code>actions</code></a>を設定<br></dd>
<br>
<dt>movesbase(Array,required)</dt>
<dd>Base Layer propertiesの<code>pickable</code>をfalseに設定した場合は省略可<br>
アイコンクリック時の経路描画に必要<br>
通常はHarmoware-VISのPropertiesの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#movesbase-object-array"><code>movesbase</code></a>を設定</dd>
<br>
<dt>movedData(Array,required)</dt>
<dd>移動体アイコン表示用のデータ（必須）<br>
通常はHarmoware-VISのPropertiesの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#moveddata-object-array"><code>movedData</code></a>を設定</dd>
<br>
<dt>visible(Boolean,option)</dt>
<dd>・Default : true<br>
falseでMovesLayerを非表示</dd>
<br>
<dt>iconChange(Boolean,option)※非推奨</dt>
<dd>・Default : true<br>
false : deck,glの<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></b>を使用<br>
true : deck,glの<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b> / <b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></b>を使用<br>
（<b>SimpleMeshLayer</b> / <b>ScenegraphLayer</b>の選択は<code>iconCubeType</code>）<br>
※ 但し<code>iconlayer</code>の表示レイヤー設定値があればそちらを優先<br>
※ 更に<code>iconDesignations</code>の表示レイヤー定義があればそちらを優先</dd>
<br>
<dt>iconCubeType(Number,option)※非推奨</dt>
<dd>・Default : 0<br>
<code>iconChange</code>がtrueの場合に有効<br>
0 : deck,glの<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>を使用<br>
1 : deck,glの<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></b>を使用<br>
※ 但し<code>iconlayer</code>の表示レイヤー設定値があればそちらを優先<br>
※ 但し<code>iconDesignations</code>の表示レイヤー定義があればそちらを優先</dd>
<br>
<dt>iconlayer(String,option)</dt>
<dd>・Default : undefined<br>
アイコン表示に使用するレイヤを次の３つより選択して設定します。<br>
"Scatterplot" : deck,glの<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a>を使用<br>
"SimpleMesh" : deck,glの<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a>を使用<br>
"Scenegraph" : deck,glの<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a>を使用<br>
※ 但し<code>iconDesignations</code>の表示レイヤー定義があればそちらを優先</dd>
<br>
<table>
<caption><b>※ <code>iconlayer</code>と<code>iconChange</code>と<code>iconCubeType</code>の組み合わせ表</b><br>
（開発時の互換性のため複雑になっています。<code>iconlayer</code>の使用を推奨）</caption>
    <thead>
        <tr><th>iconlayer</th><th>iconChange</th><th>iconCubeType</th><th>使用するレイヤー</th></tr>
    </thead>
    <tbody>
        <tr><td rowspan="3">undefined</td><td>false</td><td>⇒</td><td><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></td></tr>
        <tr><td rowspan="2">true</td><td>0</td><td><b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b><br>全組合せのDefault値</td></tr>
        <tr><td>1</td><td><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></td></tr>
        <tr><td>Scatterplot</td><td>⇒</td><td>⇒</td><td><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></td></tr>
        <tr><td>SimpleMesh</td><td>⇒</td><td>⇒</td><td><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></td></tr>
        <tr><td>Scenegraph</td><td>⇒</td><td>⇒</td><td><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></td></tr>
    </tbody>
</table>

<table>
<caption><b>Harmoware-VISで提供するレイヤーの組込アイコン</b></caption>
    <thead>
        <tr><th>ScatterplotLayer</th><th>SimpleMeshLayer</th><th>ScenegraphLayer</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="ScatterplotLayer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/4a123aa5-f5b2-c97b-ffeb-d114e939d208.png" width=200></td>
<td><img alt="SimpleMeshLayer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/7eb1e95d-eb6c-71df-32d7-a63744804522.png" width=200></td>
<td><img alt="ScenegraphLayer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/ce8e92f6-2633-1405-aa9f-1478fd9799bc.png" width=200></td>
        </tr>
    </tbody>
</table>

<dt>iconDesignations(Array,option)</dt>
<dd>・Default : undefined<br>
<code>movedData</code>のtype別のアイコン表示設定<br>
詳細は後述</dd>
</dl>

```iconDesignations_interface.ts
interface IconDesignation {
  type: string,
  layer: string,
  radiusScale?: number,
  getColor?: Function,
  getOrientation?: Function,
  getScale?: Function,
  getTranslation?: Function,
  getRadius?: Function,
  sizeScale?: number,
  mesh?: any,
  scenegraph?: any,
};
```

<table><tr><td>
<dl>
<dt>type(string,required)</dt>
<dd>対応する<b>movedData</b>のtypeを指定</dd>
<br>
<dt>layer(string,required)</dt>
<dd>設定値はMovesLayerの<b>iconlayer</b>と同じ（省略は不可）</dd>
<br>
<dt>radiusScale(number,option)</dt>
<dd>設定値はMovesLayerの<b>layerRadiusScale</b>と同じ<br>
省略時はMovesLayerの<b>layerRadiusScale</b>が優先</dd>
<br>
<dt>getColor(Function,option)</dt>
<dd>・Default : <b><code>(x)=>x.color || "green"</code></b><br>
移動体アイコンの色をコントロールする設定</dd>
<br>
<dt>getOrientation(Function,option)</dt>
<dd>設定値はMovesLayerの<b>getOrientation</b>と同じ<br>
省略時はMovesLayerの<b>getOrientation</b>が優先</dd>
<br>
<dt>getScale(Function,option)</dt>
<dd>設定値はMovesLayerの<b>getScale</b>と同じ<br>
省略時はMovesLayerの<b>getScale</b>が優先</dd>
<br>
<dt>getTranslation(Function,option)</dt>
<dd>設定値はMovesLayerの<b>getTranslation</b>と同じ<br>
省略時はMovesLayerの<b>getTranslation</b>が優先</dd>
<br>
<dt>getRadius(Function,option)</dt>
<dd>設定値はMovesLayerの<b>getRadius</b>と同じ<br>
省略時はMovesLayerの<b>getRadius</b>が優先</dd>
<br>
<dt>sizeScale(number,option)</dt>
<dd>設定値はMovesLayerの<b>sizeScale</b>と同じ<br>
省略時はMovesLayerの<b>sizeScale</b>が優先</dd>
<br>
<dt>mesh(any,option)</dt>
<dd>設定値はMovesLayerの<b>mesh</b>と同じ<br>
省略時はMovesLayerの<b>mesh</b>が優先</dd>
<br>
<dt>scenegraph(any,option)</dt>
<dd>設定値はMovesLayerの<b>scenegraph</b>と同じ<br>
省略時はMovesLayerの<b>scenegraph</b>が優先</dd>
</dl>
</td></tr></table>

<dl>
<dt>layerRadiusScale(Number,option)</dt>
<dd>・Default : 1<br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></b>のアイコンの半径スケール値</dd>
<br>
<dt>layerOpacity(Number,option)</dt>
<dd>・Default : 0.75<br>
アイコンの不透明度値</dd>
<br>
<dt>getRadius(Function,option)</dt>
<dd>・Default : <code>x => x.radius || 20</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></b>のアイコンの半径指定アクセサ（メートル）</dd>
<br>
<dt>getRouteColor(Function,option)</dt>
<dd>・Default : <code>x => x.routeColor || x.color || GREEN</code><br>
経路線描画データ（<code>routePaths</code>）生成時に使用する<code>movedData</code>の経路線<b>色</b>指定アクセサ</dd>
<br>
<dt>getRouteWidth(Function,option)</dt>
<dd>・Default : <code>x => x.routeWidth|| 10</code><br>
経路線描画データ（<code>routePaths</code>）生成時に使用する<code>movedData</code>の経路線<b>幅</b>指定アクセサ（メートル）</dd>
<br>
<dt>optionVisible(Boolean,option)</dt>
<dd>・Default : true<br>
falseでオプションデータ（３Ⅾグラフ）を非表示<br>
trueでもオプション表示するためのデータが無い場合は非表示<br>
<code>visible</code>がtrueの場合に有効</dd>
<br>
<dt>optionArcVisible(Boolean,option)</dt>
<dd>・Default : false<br>
trueの場合移動体通過中の前後の２地点を繋ぐ<b>弧</b>を描画<br>
undefinedの場合は<code>optionVisible</code>の設定を採用</dd>
<br>
<dt>optionLineVisible(Boolean,option)</dt>
<dd>・Default : false<br>
trueの場合移動体通過中の前後の２地点を繋ぐ<b>直線</b>を描画<br>
undefinedの場合は<code>optionVisible</code>の設定を採用</dd>
<br>
<dt>optionChange(Boolean,option)</dt>
<dd>・Default : false<br>
オプションデータ（３Ⅾグラフ）の表示パターンを指定<br>
false：パターン１（平面配置）<br>
true：パターン２（垂直配置）<br>
</dd>
</dl>
<table>
    <thead>
        <tr><th>パターン１</th><th>パターン２</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="パターン１" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/5ab12db2-2ea1-6c4b-abcc-9113ebe75b1e.png" width=150></td>
<td><img alt="パターン２" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/763cec79-a3f3-51bb-1886-75b8eb4868e2.png" width=150></td>
        </tr>
    </tbody>
</table>
<dl>
<br>
<dt>optionOpacity(Number,option)</dt>
<dd>・Default : 0.25<br>
オプションデータ（３Ⅾグラフ）不透明度値</dd>
<br>
<dt>optionCellSize(Number,option)</dt>
<dd>・Default : 12<br>
オプションデータ（３Ⅾグラフ）セルサイズ（メートル）</dd>
<br>
<dt>optionElevationScale(Number,option)</dt>
<dd>・Default : 1<br>
オプションデータ（３Ⅾグラフ）高さのスケール値</dd>
<br>
<dt>optionDisplayPosition(Number,option)</dt>
<dd>・Default : 30<br>
アイコンレイヤーを<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>又は<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></b>を指定時で<br>
オプションデータ（３Ⅾグラフ）をパターン１で表示する場合の<br>
４本のグラフのアイコンの中心位置から距離（メートル）</dd>
<table>
    <thead>
        <tr><th>表示イメージ</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="表示イメージ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/64d4ac8a-ffde-abdf-6ae8-e91217f9255c.png" width=200></td>
        </tr>
    </tbody>
</table>

<br>
<dt>optionCentering(Boolean,option)</dt>
<dd>・Default : false<br>
trueでオプションデータ（３Ⅾグラフ）パターン１で表示時に４本のグラフをアイコンの中心に位置付ける</dd>
<table>
    <thead>
        <tr><th>表示イメージ</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="表示イメージ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/0a5aac6c-020d-709a-c1ce-1367ffd7860f.png" width=200></td>
        </tr>
    </tbody>
</table>

<br>
<dt>getCubeColor(Function,option)</dt>
<dd>・Default : <code>x => x.optColor || [x.color] || [GREEN]</code><br>
オプションデータ（３Ⅾグラフ）配色情報アクセサ<br>
戻り値のフォーマット：<code>[ グラフ１の色指定(RGB[A]) , [ グラフ２の色指定 ] , [ グラフ３の色指定 ] , [ グラフ４の色指定 ] ]</code></dd>
<br>
<dt>getCubeElevation(Function,option)</dt>
<dd>・Default : <code>x => x.optElevation || [0]</code><br>
オプションデータ（３Ⅾグラフ）高さ情報アクセサ（メートル）<br>
戻り値のフォーマット：<code>[ グラフ１の高さ指定 , [ グラフ２の高さ指定 ] , [ グラフ３の高さ指定 ] , [ グラフ４の高さ指定 ] ]</code></dd>
<br>
<dt>getArchWidth(Function,option)</dt>
<dd>・Default : <code>x => x.archWidth|| 1</code><br>
<code>optionArcVisible</code>が<b>true</b>の場合に描画する弧の線幅情報アクセサ（メートル）</dd>
<br>
<dt>mesh(any)</dt>
<dd>・Default :※下記参照<br>
移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>の場合に表示するアイコンのデータ<br>
使用できるアイコンのデータの詳細は<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a>のリファレンスを参照<br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/657c32d5d403226c10e8">【Harmoware-VIS】OBJフォーマットのデータをアイコンに設定</a>
</dd>
<table>
    <thead>
        <tr><th>Defaultアイコン</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="SimpleMeshLayer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/7eb1e95d-eb6c-71df-32d7-a63744804522.png" width=200></td>
        </tr>
    </tbody>
</table>

<br>
<dt>scenegraph(any)</dt>
<dd>・Default :※下記参照<br>
移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></b>の場合に表示するアイコンのデータ<br>
使用できるアイコンのデータの詳細は<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a>のリファレンスを参照</dd>
<table>
    <thead>
        <tr><th>Defaultアイコン</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="ScenegraphLayer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/ce8e92f6-2633-1405-aa9f-1478fd9799bc.png" width=200></td>
        </tr>
    </tbody>
</table>

<br>
<dt>sizeScale(Number,option)</dt>
<dd>・Default : 20<br>
移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>又は<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></b>の場合のアイコンのスケール値</dd>
<br>
<dt>getOrientation(Function,option)</dt>
<dd>・Default : <code>x => x.direction ? [0,(x.direction * -1),90] : [0,0,90]</code><br>
移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>又は<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></b>の場合のアイコンの回転情報アクセサ<br>
戻り値のフォーマット：<code>[pitch, yaw, roll]</code></dd>
<br>
<dt>getScale(Function,option)</dt>
<dd>・Default : <code>x => x.scale || [1,1,1]</code><br>
移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>又は<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></b>の場合のアイコンの各軸に沿ったスケール値<br>
戻り値のフォーマット：<code>[x, y, z]</code></dd>
<br>
<dt>getTranslation(Function,option)</dt>
<dd>・Default : <code>[0,0,0]</code><br>
移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>又は<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/scenegraph-layer.md"><b>ScenegraphLayer</b></a></b>の場合のアイコンの中心位置からのオフセット値（メートル）<br>
戻り値のフォーマット：<code>[x, y, z]</code></dd>
</dl>
<hr>
##DepotsLayer
DepotsLayer は駅やバス停などの移動しない位置固定オブジェクトをアイコンとしてレンダリングします。
DepotsLayer は`HarmoVisLayers`のためのレイヤーです。
`HarmoVisLayers`の詳細は<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#harmovislayers">リンク先</a>を参照


```Examples.js
<HarmoVisLayers ...
  layers={[
    new DepotsLayer( { depotsData: this.props.depotsData } )
  ]}
/>
```

<dl>
<dt>depotsData(Array,required)</dt>
<dd>非移動体アイコン表示用のデータ（必須）<br>
通常はHarmoware-VISのPropertiesの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#depotsdata-object-array"><code>depotsData</code></a>を設定</dd>
<br>

<dt>iconChange(Boolean,option)※非推奨</dt>
<dd>・Default : true<br>
false : deck,glの<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></b>を使用<br>
true : deck,glの<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>を使用<br>
※ 但し<code>iconlayer</code>の表示レイヤー設定値があればそちらを優先<br>
※ 更に<code>iconDesignations</code>の表示レイヤー定義があればそちらを優先</dd>
<br>
<dt>iconlayer(String,option)</dt>
<dd>・Default : undefined<br>
アイコン表示に使用するレイヤを次の２つより選択して設定します。<br>
"Scatterplot" : deck,glの<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a>を使用<br>
"SimpleMesh" : deck,glの<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a>を使用<br>
※ 但し<code>iconDesignations</code>の表示レイヤー定義があればそちらを優先</dd>
</dl>
<table>
<caption><b>※ <code>iconlayer</code>と<code>iconChange</code>の組み合わせ表</b><br>
（開発時の互換性のため複雑になっています。<code>iconlayer</code>の使用を推奨）</caption>
    <thead>
        <tr><th>iconlayer</th><th>iconChange</th><th>使用するレイヤー</th></tr>
    </thead>
    <tbody>
        <tr><td rowspan="2">undefined</td><td>false</td><td><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></td></tr>
        <tr><td>true</td><td><b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b><br>全組合せのDefault値</td></tr>
        <tr><td>Scatterplot</td><td>⇒</td><td><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></td></tr>
        <tr><td>SimpleMesh</td><td>⇒</td><td><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></td></tr>
    </tbody>
</table>

<table>
<caption><b>Harmoware-VISで提供するレイヤーの組込アイコン</b></caption>
    <thead>
        <tr><th>ScatterplotLayer</th><th>SimpleMeshLayer</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="ScatterplotLayer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/e9863161-f9e8-b0ce-7b16-e4a87189dc60.png" width=200></td>
<td><img alt="SimpleMeshLayer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/1a70d2cb-c687-427b-2802-f3b09ef5e445.png" width=200></td>
        </tr>
    </tbody>
</table>

<dl>
<dt>iconDesignations(Array,option)</dt>
<dd>・Default : undefined<br>
<code>depotsData</code>のtype別のアイコン表示設定<br>
詳細は<code>MovesLayer</code>の<code>iconDesignations</code>の解説を参照</dd>
<br>
<dt>layerRadiusScale(Number,option)</dt>
<dd>・Default : 1<br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></b>のアイコンの半径スケール値</dd>
<br>
<dt>layerOpacity(Number,option)</dt>
<dd>・Default : 0.5<br>
アイコンの不透明度値</dd>
<br>
<dt>getColor(Function,option)</dt>
<dd>・Default : <b><code>(x)=>x.color || "DARKMAGENTA"</code></b><br>
非移動体アイコンの色をコントロールする設定</dd>
<br>
<dt>getRadius(Function,option)</dt>
<dd>・Default : <code>x => x.radius || 30</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/scatterplot-layer.md"><b>ScatterplotLayer</b></a></b>のアイコンの半径指定アクセサ（メートル）</dd>
<br>
<dt>optionVisible(Boolean,option)</dt>
<dd>・Default : true<br>
falseでオプションデータ（３Ⅾグラフ）を非表示<br>
trueでもオプション表示するためのデータが無い場合は非表示<br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a></dd>
<br>
<dt>optionChange(Boolean,option)</dt>
<dd>・Default : false<br>
オプションデータ（３Ⅾグラフ）の表示パターンを指定<br>
false：パターン１（平面配置）<br>
true：パターン２（垂直配置）<br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a>
</dd>
</dl>
<table>
    <thead>
        <tr><th>パターン１</th><th>パターン２</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="パターン１" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/6b0036cb-fdfb-74eb-16dd-d9de24cbbb11.png" width=200></td>
<td><img alt="パターン２" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/e2d9f3f9-3a31-87a1-f185-8159d0ecb0e0.png" width=200></td>
        </tr>
    </tbody>
</table>
<dl>

<br>
<dt>optionOpacity(Number,option)</dt>
<dd>・Default : 0.25<br>
オプションデータ（３Ⅾグラフ）不透明度値<br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a></dd>
<br>
<dt>optionCellSize(Number,option)</dt>
<dd>・Default : 20<br>
オプションデータ（３Ⅾグラフ）セルサイズ（メートル）<br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a></dd>
<br>
<dt>optionElevationScale(Number,option)</dt>
<dd>・Default : 1<br>
オプションデータ（３Ⅾグラフ）高さのスケール値<br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a></dd>
<br>
<dt>optionCentering(Boolean,option)</dt>
<dd>・Default : false<br>
trueでオプションデータ（３Ⅾグラフ）パターン１で表示時に４本のグラフをアイコンの中心に位置付ける<br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a></dd>
</dl>
<table>
    <thead>
        <tr><th>表示イメージ</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="表示イメージ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/a0a23f05-2431-fca0-10f6-4ec573d2515d.png" width=200></td>
        </tr>
    </tbody>
</table>

<dl>

<br>
<dt>optionDisplayPosition(Number,option)</dt>
<dd>・Default : 30<br>
アイコンレイヤーを<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>を指定時で<br>
オプションデータ（３Ⅾグラフ）をパターン１で表示する場合の<br>
４本のグラフのアイコンの中心位置から距離（メートル）<br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a></dd>
</dl>
<table>
    <thead>
        <tr><th>表示イメージ</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="表示イメージ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/c5149e18-96b8-a794-b0a2-0f0bf20c1256.png" width=200></td>
        </tr>
    </tbody>
</table>

<dl>
<dt>getCubeColor(Function,option)</dt>
<dd>・Default : <code>x => x.optColor || [x.color] || [DARKMAGENTA]</code><br>
オプションデータ（３Ⅾグラフ）配色情報アクセサ<br>
戻り値のフォーマット：<code>[ グラフ１の色指定(RGB[A]) , [ グラフ２の色指定 ] , [ グラフ３の色指定 ] , [ グラフ４の色指定 ] ]</code><br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a></dd>
<br>
<dt>getCubeElevation(Function,option)</dt>
<dd>・Default : <code>x => x.optElevation || [0]</code><br>
オプションデータ（３Ⅾグラフ）高さ情報アクセサ（メートル）<br>
戻り値のフォーマット：<code>[ グラフ１の高さ指定 , [ グラフ２の高さ指定 ] , [ グラフ３の高さ指定 ] , [ グラフ４の高さ指定 ] ]</code><br>
参照：<a href="https://qiita.com/ucl_Harmoware_VIS/items/c0516d6fcd24a1eddffb">【Harmoware-VIS】オプションのグラフ表示（停留所）</a></dd>
<br>
<dt>mesh(any,option)</dt>
<dd>・Default :※下記参照<br>
非移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>の場合に表示するアイコンのデータ<br>
使用できるアイコンのデータの詳細は<a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a>のリファレンスを参照</dd>
<table>
    <thead>
        <tr><th>Defaultアイコン</th></tr>
    </thead>
    <tbody>
        <tr>
<td><img alt="SimpleMeshLayer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625473/1a70d2cb-c687-427b-2802-f3b09ef5e445.png" width=200></td>
        </tr>
    </tbody>
</table>
<br>
<dt>meshSizeScale(Number,option)</dt>
<dd>・Default : 40<br>
非移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>の場合のアイコンのスケール値</dd>
<br>
<dt>getOrientation(Function,option)</dt>
<dd>・Default : <code>[0,0,0]</code><br>
非移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>の場合のアイコンの回転情報アクセサ<br>
戻り値のフォーマット：<code>[pitch, yaw, roll]</code></dd>
<br>
<dt>getScale(Function,option)</dt>
<dd>・Default : <code>[1,1,1]</code><br>
非移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>の場合のアイコンの各軸に沿ったスケール値<br>
戻り値のフォーマット：<code>[x, y, z]</code></dd>
<br>
<dt>getTranslation(Function,option)</dt>
<dd>・Default : <code>[0,0,0]</code><br>
非移動体アイコンを使用するレイヤーが<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/mesh-layers/simple-mesh-layer.md"><b>SimpleMeshLayer</b></a></b>の場合のアイコンの中心位置からのオフセット値（メートル）<br>
戻り値のフォーマット：<code>[x, y, z]</code></dd>
</dl>
<hr>
##LineMapLayer
LineMapLayer は道路や線路、建築物や範囲などの非移動体を「線」「面」「立体」でレンダリングします。
内部でdeck.glの<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/line-layer.md">LineLayer</a></b>と<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/path-layer.md">PathLayer</a></b>と<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/polygon-layer.md">PolygonLayer</a></b>を使用しています。
LineMapLayer は`HarmoVisLayers`のためのレイヤーです。
`HarmoVisLayers`の詳細は<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#harmovislayers">リンク先</a>を参照

```Examples.js
<HarmoVisLayers ...
    layers={[
        new LineMapLayer( { data: this.props.linemapData } )
    ]}
/>
```

<dl>
<dt>data(Array,required)</dt>
<dd>非移動体オブジェクト表示用のデータ（必須）<br>
通常はHarmoware-VISのPropertiesの<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#linemapdata-object"><code>linemapData</code></a>を設定<br>
<a href="https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#linemapdata-object"><code>linemapData</code></a>のフォーマットはAPI解説を参照</dd>
<br>
<dt>lineOpacity(Number,option)</dt>
<dd>・Default : 1.0<br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/line-layer.md">LineLayer</a></b>と<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/path-layer.md">PathLayer</a></b>のオブジェクト不透明度値（opacity）</dd>
<br>
<dt>polygonOpacity(Number,option)</dt>
<dd>・Default : 0.5<br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/polygon-layer.md">PolygonLayer</a></b>のオブジェクト不透明度値（opacity）</dd>
<br>
<dt>getWidth(Function,option)</dt>
<dd>・Default : <code>x => x.strokeWidth || 1</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/line-layer.md">LineLayer</a></b>と<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/path-layer.md">PathLayer</a></b>のオブジェクト線幅情報アクセサ（メートル）</dd>
<br>
<dt>getColor(Function,option)</dt>
<dd>・Default : <code>x => x.color || WHITE</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/line-layer.md">LineLayer</a></b>と<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/path-layer.md">PathLayer</a></b>のオブジェクト線<b>色</b>情報アクセサ（getColor）<br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/polygon-layer.md">PolygonLayer</a></b>のオブジェクト線<b>色</b>情報アクセサ（getFillColor / getLineColor）</dd>
<br>
<dt>getSourcePosition(Function,option)</dt>
<dd>・Default : <code>x => x.sourcePosition</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/line-layer.md">LineLayer</a></b>のオブジェクト線<b>始端</b>情報アクセサ（getSourcePosition）</dd>
<br>
<dt>getTargetPosition(Function,option)</dt>
<dd>・Default : <code>x => x.targetPosition</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/line-layer.md">LineLayer</a></b>のオブジェクト線<b>終端</b>情報アクセサ（getTargetPosition）</dd>
<br>
<dt>getPath(Function,option)</dt>
<dd>・Default : <code>x => x.path || []</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/path-layer.md">PathLayer</a></b>のオブジェクト線<b>経路</b>情報アクセサ（getPath）<br>
<br>
<dt>getPolygon(Function,option)</dt>
<dd>・Default : <code>x => x.polygon || []</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/polygon-layer.md">PolygonLayer</a></b>のオブジェクト<b>３Ｄ構成</b>情報アクセサ（getPath）</dd>
<br>
<dt>getCoordinates(Function,option)</dt>
<dd>・Default : <code>x => x.coordinates || []</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/polygon-layer.md">PolygonLayer</a></b>のオブジェクト<b>２Ｄ構成</b>情報アクセサ（getPath）</dd>
<br>
<dt>getElevation(Function,option)</dt>
<dd>・Default : <code>x => x.elevation || 3</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/polygon-layer.md">PolygonLayer</a></b>のオブジェクト<b>高さ</b>情報アクセサ（getPath）</dd>
<br>
<dt>getDashArray(Function,option)</dt>
<dd>・Default : <code>x => x.dash || [0,0]</code><br>
<b><a href="https://github.com/visgl/deck.gl/blob/master/docs/api-reference/layers/path-layer.md">PathLayer</a></b>のオブジェクト<b>点線</b>情報アクセサ（getPath）<br>
戻り値のフォーマット：<code>[dashSize, gapSize]</code></dd>
</dl>
#Control component リファレンス
Harmoware-VIS の Control component リファレンスについては別記事「[Harmoware-VIS Control component リファレンス](https://qiita.com/ucl_Harmoware_VIS/items/7315ccff187ca608c0db)」をご覧ください。