# MovesLayer

&#x20;The MovesLayer will render moving objects such as vehicles.\
Layer for HarmoVisLayers.

#### Examples

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

#### Properties

Inherits from Base Layer properties.

| Properties            | PropTypes               | Default                                                    | Description                                                                                                                                                                                                                                                                                              |
| --------------------- | ----------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| actions               | object option           | --                                                         | <p>Required for pathway drawing</p><p>state <code>actions</code></p>                                                                                                                                                                                                                                     |
| routePaths            | Array option            | --                                                         | <p>Required for pathway drawing</p><p>state <code>routePaths</code></p>                                                                                                                                                                                                                                  |
| movesbase             | Array option            | --                                                         | <p>Required for pathway drawing</p><p>state <code>movesbase</code></p>                                                                                                                                                                                                                                   |
| movedData             | Array required          | --                                                         | state `movedData`                                                                                                                                                                                                                                                                                        |
| visible               | Boolean option          | true                                                       | Icon display availability                                                                                                                                                                                                                                                                                |
| iconlayer             | String option           | undefined                                                  | <p>'Scatterplot' or 'Scenegraph' or 'SimpleMesh'</p><p>※ Invalid if there is iconDesignations definition</p>                                                                                                                                                                                             |
| iconChange            | Boolean option          | true                                                       | <p>true : 3D Cube Icon<br>false : Circle Icon</p><p>※ Invalid if there is iconDesignations definition</p>                                                                                                                                                                                                |
| iconCubeType          | Number option           | 0                                                          | <p>0 : Rectangular</p><p>1 : The 3D geometry</p><p>※ Invalid if there is iconDesignations definition</p>                                                                                                                                                                                                 |
| iconDesignations      | Array option            | --                                                         | <p>Icon layer multiple specification information.</p><p>※ interface : IconDesignation</p>                                                                                                                                                                                                                |
| clickedObject         | Array option            | --                                                         | <p>Required for pathway drawing</p><p>state <code>clickedObject</code></p>                                                                                                                                                                                                                               |
| layerRadiusScale      | Number option           | 1                                                          | <p>Icon size scale</p><p>for 'Scatterplot' layer.</p>                                                                                                                                                                                                                                                    |
| layerOpacity          | Number option           | 0.75                                                       | Icon opacity                                                                                                                                                                                                                                                                                             |
| getRadius             | Function option         | x => x.radius \|\| 20                                      | <p>Icon radius specification accessor</p><p>for 'Scatterplot' layer</p>                                                                                                                                                                                                                                  |
| getRouteColor         | Function option         | x => x.routeColor \|\| x.color \|\| GREEN                  | route line color specification accessor                                                                                                                                                                                                                                                                  |
| getRouteWidth         | Function option         | x => x.routeWidth\|\| 10                                   | route line width specification accessor                                                                                                                                                                                                                                                                  |
| optionVisible         | Boolean option          | true                                                       | Option information display availability                                                                                                                                                                                                                                                                  |
| optionArcVisible      | Boolean option          | undefined                                                  | Option ArcLayer display availability                                                                                                                                                                                                                                                                     |
| optionLineVisible     | Boolean option          | false                                                      | Option LineLayer display availability                                                                                                                                                                                                                                                                    |
| optionChange          | Boolean option          | false                                                      | option Display pattern switching                                                                                                                                                                                                                                                                         |
| optionOpacity         | Number option           | 0.25                                                       | option Information opacity                                                                                                                                                                                                                                                                               |
| optionCellSize        | Number option           | 12                                                         | option information cell size                                                                                                                                                                                                                                                                             |
| optionElevationScale  | Number option           | 1                                                          | option information elevation scale                                                                                                                                                                                                                                                                       |
| optionDisplayPosition | Number option           | 20                                                         | <p>option information position</p><p>for 'Scenegraph' &#x26; 'SimpleMesh' layer</p>                                                                                                                                                                                                                      |
| optionCentering       | Boolean option          | false                                                      | option information centering                                                                                                                                                                                                                                                                             |
| getCubeColor          | Function option         | x => x.optColor \|\| \[x.color] \|\| \[GREEN]              | option information color specification accessor                                                                                                                                                                                                                                                          |
| getCubeElevation      | Function option         | x => x.optElevation \|\| \[0]                              | option information elevation specification accessor                                                                                                                                                                                                                                                      |
| getArchWidth          | Function option         | x => x.archWidth\|\| 1                                     | option information (ArcLayer) stroke width specification accessor                                                                                                                                                                                                                                        |
| mesh                  | <p>any</p><p>option</p> | Customized CubeGeometry                                    | <p>Valid when<code>iconCubeType</code> is 0.</p><p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/simple-mesh-layer.md">The geometry to render for each data object.</a></p><p>for 'SimpleMesh' layer</p>                                                                         |
| scenegraph            | <p>any</p><p>option</p> | ※                                                          | <p>Valid when<code>iconCubeType</code> is 1.</p><p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/scenegraph-layer.md#scenegraph-urlobjectpromise">The geometry to render for each data object.</a></p><p>for 'Scenegraph' layer</p>                                              |
| sizeScale             | Number option           | 20                                                         | <p>Multiplier to scale each geometry by.</p><p>for 'Scenegraph' &#x26; 'SimpleMesh' layer</p>                                                                                                                                                                                                            |
| getOrientation        | Function option         | x => x.direction ? \[0,(x.direction \* -1),90] : \[0,0,90] | <p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/scenegraph-layer.md#getorientation-functionarray-optional">Object orientation defined as a vec3 of Euler angles, <code>[pitch, yaw, roll]</code> in degrees.</a></p><p>for 'Scenegraph' &#x26; 'SimpleMesh' layer</p>           |
| getScale              | Function option         | x => x.scale \|\| \[1,1,1]                                 | <p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/scenegraph-layer.md#getscale-functionarray-optional">Scaling factor on the mesh along each axis.</a></p><p>for 'Scenegraph' &#x26; 'SimpleMesh' layer</p>                                                                       |
| getTranslation        | Function option         | \[0,0,0]                                                   | <p><a href="https://github.com/uber/deck.gl/blob/7.3-release/docs/layers/scenegraph-layer.md#gettranslation-functionarray-optional">Translation of the mesh along each axis. Offset from the center position given by <code>getPosition</code>.</a></p><p>for 'Scenegraph' &#x26; 'SimpleMesh' layer</p> |

※ [airplane.glb](https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/scenegraph-layer/airplane.glb)

#### The json format of the simulation data file

* format 1

```javascript
// bounds timeBegin timeLength movesbase
{   "timeBegin": 9999999999, // simulation start UNIX time (sec)
    "timeLength": 99999, // simulation span (sec)
//    "elapsedtimeMode": "UNIXTIME", // If elapsedtime is specified in UNIXTIME
    "bounds": { // simulation area (north, south, west, east)
        "northlatitude": 99.99999, "southlatitude": 99.99999,
        "westlongitiude" 999.99999, "eastlongitiude": 999.99999,
    },
    "movesbase": [ // Simulation data format *(required)
        { // Define time and route for each operation unit (one operation)
          // (`departuretime`, `arrivaltime`, `elapsedtime` is the elapsed time (sec) from timeBegin)
          // (When `timeBegin` is omitted, `departuretime`, `arrivaltime`, `elapsedtime` is UNIX time (second))
          // (When `timeBegin` is defined, but `elapsedtimeMode` defines `UNIXTIME`, then `departuretime`, `arrivaltime`, and `elapsedtime` are UNIX time (in seconds))
            "type": "bus", // Icon layer multiple specification information. *(option)
            "operation": [ // Define time and route for each operation unit (one operation) *(required)
                { // Defined by elapsed time
                    "elapsedtime": 99999, // elapsedtime (sec) *(required)
                    // Specified in `position` or `longitude-latitude` format
                    // However, "position" is not required except for moving objects.
                    "position": [999.9999, 999.9999, 999.9999], // Position of `elapsedtime` (long,Lati,height) *(required)
                    "longitude": 999.9999, // Position of `elapsedtime` (longitude) *(required)
                    "latitude": 99.999, // Position of `elapsedtime` (latitude) *(required)
                },・・・・・・
            ],
        },・・・・・・
    ],
}
```

* format 2

```javascript
[ // Simulation data format
    { // Define time and route for each operation unit (one operation)
      // (`departuretime`, `arrivaltime`, `elapsedtime` is UNIX time (second))
        "type": "train", // Icon layer multiple specification information. *(option)
        "operation": [ // Define time and route for each operation unit (one operation) *(required)
            { // Defined by elapsed time
                "elapsedtime": 9999999999, // elapsedtime (sec) *(required)
                // Specified in `position` or `longitude-latitude` format
                // However, "position" is not required except for moving objects.
                "position": [999.9999, 999.9999, 999.9999], // Position of `elapsedtime` (long,Lati,height) *(required)
                "longitude": 999.9999, // Position of `elapsedtime` (longitude) *(required)
                "latitude": 99.999, // Position of `elapsedtime` (latitude) *(required)
            },・・・・・・
        ],
    },・・・・・・
]
```

#### Reserved key name of simulation data file

```
type,departuretime,arrivaltime,operation,elapsedtime,position,
longitude,latitude,color,direction,sourcePosition,targetPosition,
sourceColor,targetColor,timeBegin,timeLength,bounds,movesbase
```

#### Option Display Sample

<div align="left"><img src="https://4102328192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWxk9k4ZoHtWQJdRi1G%2F-LpbPxRaMWJf7oDw1TIx%2F-LpbQUa_N8bb-zqc1qsN%2Foption_display.png?alt=media&#x26;token=a505d874-374b-4227-b0c1-a459a8c04531" alt="Left &#x26; center &#x22;optionChange = false&#x22; , Right &#x22;optionChange = true&#x22;"></div>

#### The geometry Display Sample

![](https://4102328192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWxk9k4ZoHtWQJdRi1G%2F-LsZcI4f0wd1yrNK8mk_%2F-LsZihlI41GXOT1FpCMs%2FThe%20geometry%20Display%20Sample.jpg?alt=media\&token=abdeba08-c739-42e1-b5fa-d0ba364daefb)

#### Multiple icon layers.

![](https://4102328192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWxk9k4ZoHtWQJdRi1G%2F-M-HrKRwFXT5JJCMV2JN%2F-M-Ht0tZdYqLRGQNgOaP%2Fsumple.png?alt=media\&token=a22c36d1-c6a4-4f4c-bad4-6a682f187eb5)

Add "type" identification to simulation data.\
Define information for each type in iconDesignations of Props.

Format of information defined in iconDesignations.\
If not specified, it will be the specified value of MovesLayer's props.

| Properties     | PropTypes               | Description                                                                   |
| -------------- | ----------------------- | ----------------------------------------------------------------------------- |
| type           | string required         | The type identifier added to the simulation data.                             |
| layer          | string required         | 'Scatterplot' or 'Scenegraph' or 'SimpleMesh'                                 |
| radiusScale    | number option           | Same as MovesLayer props.                                                     |
| getColor       | Function option         | <p>x => x.color || GREEN</p><p>Icon color specification accessor.</p>         |
| getOrientation | Function option         | Same as MovesLayer props.                                                     |
| getScale       | Function option         | Same as MovesLayer props.                                                     |
| getTranslation | Function option         | Same as MovesLayer props.                                                     |
| getRadius      | Function option         | Same as MovesLayer props.                                                     |
| sizeScale      | number option           | Same as MovesLayer props.                                                     |
| mesh           | <p>any</p><p>option</p> | <p>layer specification is for SimpleMesh.</p><p>Same as MovesLayer props.</p> |
| scenegraph     | <p>any</p><p>option</p> | <p>layer specification is for Scenegraph.</p><p>Same as MovesLayer props.</p> |
