General

The Layers allow styling and filter data. They are generic and can be applied to any View that support them.

For example, the data can be displayed as:

• text
• icon
• line
• map point
• ...

Use

There are two types of properties of a layer:

• static properties
• dynamic properties

Static properties are defined at creation and cannot be modified. Depending on the property, it can be a number, a string, an object etc.

Dynamic properties are defined as a function. Thus, each data can be modified individually by going through these functions.

The function can take two forms:

• the simple form as an arrow function (example here)
• the complex form defining a dataSource and a separate handler

Thus, for a given layer, we can define a dataSourceId for the entire layer or define a specific dataSourceId for each function.

Example

// style it with a moving point marker
let pointMarkerLayer = new PointMarkerLayer({
  dataSourceId: gpsDataSource.id,
  getLocation: (rec) => ({
        x: rec.location.lon,
        y: rec.location.lat,
        z: rec.location.alt
  }),
  icon: './images/car-location.png',
  iconSize: [32, 64],
  iconAnchor: [16, 65],
  name: 'Car',
  description: 'GPS car Toulouse'
});

or

// add 3D model marker to Cesium view
let pointMarker = new PointMarkerLayer({
    dataSourceIds: [platformLocationDataSource.id, platformOrientationDataSource.id],
    name: "3DR Drone",
    label: "3DR Solo",
    getLocation: {
        dataSourceIds: [platformLocationDataSource.getId()],
        handler: function (rec) {
            return {
                x: rec.loc.lon,
                y: rec.loc.lat,
                z: rec.loc.alt - 184 // model offset
            };
        }
    },
    getOrientation: {
        dataSourceIds: [platformOrientationDataSource.getId()],
        handler: function (rec) {
            return {
                heading: rec.attitude.yaw
            };
        }
    },
    zoomLevel: 18,
    icon: './images/drone.png',
    iconSize: [128,128],
    iconAnchor: [70, 98]
});

In the first case we use directly getLocation: (rec) => {} and in the second case we can define a specific dataSource using the field dataSourceIds: [platformLocationDataSource.getId()]