Cesium

The CesiumView is a way of showing data point on a map. Often, it is used to show GPS data, or fixed position of any sensor. This View can also display path using the corresponding Layer.

The View is based on CesiumJS (opens new window) framework.

API Reference

Cesium needs to specify the CESIUM_BASE_URL, either using webpack, or inside the code:

window.CESIUM_BASE_URL = './';

To setup webpack, you can use the osh-js examples and/or read this article (opens new window).

Supported layers

The view supports type layers:

• marker
• draping
• polyline

Properties configuration

You can override the default viewer properties (opens new window) using the cesiumProps.viewerProps object.

The default viewer properties are:

const imageryProviders = createDefaultImageryProviderViewModels();
let viewerProps = {
  baseLayerPicker: true,
  imageryProviderViewModels: imageryProviders,
  selectedImageryProviderViewModel: imageryProviders[6],
  timeline: false,
  homeButton: false,
  navigationInstructionsInitiallyVisible: false,
  navigationHelpButton: false,
  geocoder: true,
  fullscreenButton: false,
  showRenderLoopErrors: true,
  animation: false,
  scene3DOnly: true, // for draw layer
  terrainProvider: new EllipsoidTerrainProvider(),
};

Example

import SosGetResult from 'osh-js/core/datasource/sos/SosGetResult.datasource.js';
import CesiumView from 'osh-js/core/ui/view/map/CesiumView.js';
import {EllipsoidTerrainProvider, Ion} from '@cesium/engine';
import {Viewer} from '@cesium/widgets';
import PointMarkerLayer from 'osh-js/core/ui/layer/PointMarkerLayer.js';
import {Mode} from 'osh-js/core/datasource/Mode';
import DataSynchronizer from 'osh-js/core/timesync/DataSynchronizer';

Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ODY0NTkzNS02NzI0LTQwNDktODk4Zi0zZDJjOWI2NTdmYTMiLCJpZCI6MTA1N' +
    'zQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTY4NzI1ODJ9.IbAajOLYnsoyKy1BOd7fY1p6GH-wwNVMdMduA2IzGjA';
window.CESIUM_BASE_URL = './';

// create data source for Android phone GPS
let gpsDataSource = new SosGetResult('android-GPS', {
    endpointUrl: 'sensiasoft.net/sensorhub/sos',
    offeringID: 'urn:android:device:060693280a28e015-sos',
    observedProperty: 'http://sensorml.com/ont/swe/property/Location',
    startTime: '2015-02-16T07:58:15.447Z',
    endTime: '2015-02-16T08:09:00Z',
    mode: Mode.REPLAY,
    tls: true,
    timeShift: -16000
});

const dataSynchronizer = new DataSynchronizer({
    replaySpeed: 2,
    startTime: '2015-02-16T07:58:22.00Z',
    endTime: '2015-02-16T08:09:00Z',
    dataSources: [gpsDataSource]
});

// style it with a moving point marker
let pointMarker = new PointMarkerLayer({
    dataSourceId: gpsDataSource.id,
    getLocation: (rec) => ({
        x: rec.location.lon,
        y: rec.location.lat
    }),
    orientation: {
        heading: 0
    },
    icon: 'images/car-location.png',
    iconAnchor: [16, 40],
    iconSize: [32, 65],
});

// #region snippet_cesium_location_view
// create Cesium view
let cesiumView = new CesiumView({
    container: 'cesium-container',
    layers: [pointMarker],
    options: {
        // can provide either viewer custom properties or full Viewer object
        viewerProps: {
            geocoder: false,
            fullscreenButton: true,
            navigationHelpButton: true,
            homeButton: true
        },
        viewer: new Viewer('cesium-container', {
            baseLayerPicker: true,
            timeline: false,
            homeButton: false,
            navigationInstructionsInitiallyVisible: false,
            navigationHelpButton: false,
            geocoder: true,
            fullscreenButton: false,
            showRenderLoopErrors: true,
            animation: false,
            scene3DOnly: true, // for draw layer
        }),
        location: {
            longitude: -5.185511,
            latitude: 42.092383,
            altitude: 3000
        },
        orientation: {
            heading: 150,
            pitch: -35
        },
        layers: ['Bing Maps Aerial', 'Bing Maps Aerial with Labels', 'Bing Maps Roads']
    }
});

// #endregion snippet_cesium_location_view
cesiumView.viewer.terrainProvider = new EllipsoidTerrainProvider();

// start streaming
// dataSynchronizer.connect();

---