MovesLayer

The MovesLayer will render moving objects such as vehicles. Layer for HarmoVisLayers.

Examples

<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	--	Required for pathway drawing state actions
routePaths	Array option	--	Required for pathway drawing state routePaths
movesbase	Array option	--	Required for pathway drawing state movesbase
movedData	Array required	--	state movedData
visible	Boolean option	true	Icon display availability
iconlayer	String option	undefined	'Scatterplot' or 'Scenegraph' or 'SimpleMesh' ※ Invalid if there is iconDesignations definition
iconChange	Boolean option	true	true : 3D Cube Icon false : Circle Icon ※ Invalid if there is iconDesignations definition
iconCubeType	Number option	0	0 : Rectangular 1 : The 3D geometry ※ Invalid if there is iconDesignations definition
iconDesignations	Array option	--	Icon layer multiple specification information. ※ interface : IconDesignation
clickedObject	Array option	--	Required for pathway drawing state clickedObject
layerRadiusScale	Number option	1	Icon size scale for 'Scatterplot' layer.
layerOpacity	Number option	0.75	Icon opacity
getRadius	Function option	x => x.radius || 20	Icon radius specification accessor for 'Scatterplot' layer
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	option information position for 'Scenegraph' & 'SimpleMesh' layer
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	any option	Customized CubeGeometry	Valid wheniconCubeType is 0. The geometry to render for each data object. for 'SimpleMesh' layer
scenegraph	any option	※	Valid wheniconCubeType is 1. The geometry to render for each data object. for 'Scenegraph' layer
sizeScale	Number option	20	Multiplier to scale each geometry by. for 'Scenegraph' & 'SimpleMesh' layer
getOrientation	Function option	x => x.direction ? [0,(x.direction * -1),90] : [0,0,90]	Object orientation defined as a vec3 of Euler angles, [pitch, yaw, roll] in degrees. for 'Scenegraph' & 'SimpleMesh' layer
getScale	Function option	x => x.scale || [1,1,1]	Scaling factor on the mesh along each axis. for 'Scenegraph' & 'SimpleMesh' layer
getTranslation	Function option	[0,0,0]	Translation of the mesh along each axis. Offset from the center position given by getPosition. for 'Scenegraph' & 'SimpleMesh' layer

※ airplane.glb

The json format of the simulation data file

• format 1

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

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

Left & center "optionChange = false" , Right "optionChange = true"

The geometry Display Sample

Multiple icon layers.

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	x => x.color || GREEN Icon color specification accessor.
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	any option	layer specification is for SimpleMesh. Same as MovesLayer props.
scenegraph	any option	layer specification is for Scenegraph. Same as MovesLayer props.