Sentinel Hub Cesium

by Nicolas

HTML

<script src="https://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css">
<div id="cesiumContainer"></div>

CSS

html,
      #cesiumContainer {
        height: 100%;
      }
      
      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
        height: 100%;
      }

JavaScript

// Add a WMS imagery layer
  var imageryProvider = new Cesium.WebMapServiceImageryProvider({
    url: 'https://services.sentinel-hub.com/ogc/wms/b7b5e3ef-5a40-4e2a-9fd3-75ca2b81cb32',
    layers: '1_NATURAL_COL0R',
    //minimumLevel: 8,
    //maximumLevel: 16,
    parameters: {
      time: '2018-03-28/2018-03-28',
      gain: 1.0,
      transparent: true,
      format: 'image/jpg',
      showLogo: false,
      maxcc: '100'
    },
    tileWidth: 512,
    tileHeight: 512,
    rectangle: Cesium.Rectangle.fromDegrees(168, -45, 172, -41),
    credit: 'Copernicus Sentinel processed by Sentinel Hub [CC BY-SA 3.0 IGO]'
  });

  var terrainProvider = Cesium.createWorldTerrain();

  var viewer = new Cesium.CesiumWidget('cesiumContainer', {
    imageryProvider: imageryProvider,
    terrainProvider: terrainProvider,
    requestWaterMask: true,
    scene3DOnly: true
  });

  viewer.scene.fog.density = 5e-5;
  viewer.scene.fog.enabled = true;
  viewer.scene.globe.enableLighting = false;
  viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(170.18328840000004, -43.3873293), new Cesium.Cartesian3(-4500.0, 4500.0, 1900.0));
  
  
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(170.1579236984253, -43.897181139757194, 2000.0),
    duration: 30,
    maximumHeight: 18000,
    orientation: {
      heading: Cesium.Math.toRadians(180.0),
      pitch: Cesium.Math.toRadians(-25.0),
      roll: 0.0
    }
  });