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 SosGetResultJson from 'osh-js/core/datasource/SosGetResultJson.js';
import CesiumView from 'osh-js/core/ui/view/map/CesiumView.js';
import {EllipsoidTerrainProvider} from 'cesium';
import PointMarkerLayer from 'osh-js/core/ui/layer/PointMarkerLayer.js';

window.CESIUM_BASE_URL = './';

// create data source for Android phone GPS
let gpsDataSource = new SosGetResultJson('android-GPS', {
    protocol: 'ws',
    service: 'SOS',
    endpointUrl: 'sensiasoft.net:8181/sensorhub/sos',
    offeringID: 'urn:android:device:060693280a28e015-sos',
    observedProperty: 'http://sensorml.com/ont/swe/property/Location',
    startTime: '2015-02-16T07:58:30Z',
    endTime: '2015-02-16T08:09:00Z',
    replaySpeed: 2
});

// 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]
});

// #region snippet_cesium_location_view
// create Cesium view
let cesiumView = new CesiumView({
    container: 'cesium-container',
    layers: [pointMarker],
    cesiumProps: {
        viewerProps: {
            geocoder: false,
            fullscreenButton: true,
            navigationHelpButton: true,
            homeButton: true
        }
    }
});

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

// start streaming
gpsDataSource.connect();

---