How to use cesium - 10 common examples

init() {
      viewer = new Viewer("cesiumContainer", {
        animation: false, //是否创建动画小器件，左下角仪表
        baseLayerPicker: false, //是否显示图层选择器
        fullscreenButton: true, //是否显示全屏按钮
        geocoder: true, //是否显示geocoder小器件，右上角查询按钮
        homeButton: false, //是否显示Home按钮
        infoBox: false, //是否显示信息框
        sceneModePicker: false, //是否显示3D/2D选择器
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, //是否显示时间轴
        navigationHelpButton: false, //是否显示右上角的帮助按钮
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        clock: new Clock(), //用于控制当前时间的时钟对象
        selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型，仅baseLayerPicker设为true有意义
        // imageryProviderViewModels: createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义
        // terrainProviderViewModels: createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组

this.eventHelper.add(this.terria.afterWidgetChanged, function () {
    if (defined(this._removeSubscription)) {
      this._removeSubscription()
      this._removeSubscription = undefined
    }
  }, this)
  //        this.terria.beforeWidgetChanged.addEventListener(function () {

// Register custom Knockout.js bindings.  If you're not using the TerriaJS user interface, you can remove this.
  registerKnockoutBindings()

  if (!defined(this.terria.options.enableDistanceLegend) || this.terria.options.enableDistanceLegend) {
    this.distanceLegendDiv = document.createElement('div')
    container.appendChild(this.distanceLegendDiv)
    this.distanceLegendDiv.setAttribute('id', 'distanceLegendDiv')
    this.distanceLegendViewModel = DistanceLegendViewModel.create({
      container: this.distanceLegendDiv,
      terria: this.terria,
      mapElement: container,
      enableDistanceLegend: true
    })
  }

  if ((!defined(this.terria.options.enableZoomControls) || this.terria.options.enableZoomControls) && (!defined(this.terria.options.enableCompass) || this.terria.options.enableCompass)) {
    this.navigationDiv = document.createElement('div')
    this.navigationDiv.setAttribute('id', 'navigationDiv')
    container.appendChild(this.navigationDiv)
    // Create the navigation controls.
    this.navigationViewModel = NavigationViewModel.create({
      container: this.navigationDiv,
      terria: this.terria,
      enableZoomControls: true,
      enableCompass: true
    })
  } else if ((defined(this.terria.options.enableZoomControls) && !this.terria.options.enableZoomControls) && (!defined(this.terria.options.enableCompass) || this.terria.options.enableCompass)) {
    this.navigationDiv = document.createElement('div')
    this.navigationDiv.setAttribute('id', 'navigationDiv')
    container.appendChild(this.navigationDiv)
    // Create the navigation controls.
    this.navigationViewModel = NavigationViewModel.create({

var NavigationViewModel = function (options) {
  this.terria = options.terria
  this.eventHelper = new EventHelper()
  this.enableZoomControls = (defined(options.enableZoomControls)) ? options.enableZoomControls : true
  this.enableCompass = (defined(options.enableCompass)) ? options.enableCompass : true
  this.navigationLocked = false

  // if (this.showZoomControls)
  //   {
  this.controls = options.controls
  if (!defined(this.controls)) {
    this.controls = [
      new ZoomNavigationControl(this.terria, true),
      new ResetViewNavigationControl(this.terria),
      new ZoomNavigationControl(this.terria, false)
    ]
  }
  // }

  this.svgCompassOuterRing = svgCompassOuterRing
  this.svgCompassGyro = svgCompassGyro

function initialize(viewerCesiumWidget, options) {
  if (!defined(viewerCesiumWidget)) {
    throw new DeveloperError('CesiumWidget or Viewer is required.')
  }

  //        options = defaultValue(options, defaultValue.EMPTY_OBJECT);

  var cesiumWidget = defined(viewerCesiumWidget.cesiumWidget) ? viewerCesiumWidget.cesiumWidget : viewerCesiumWidget

  var container = document.createElement('div')
  container.className = 'cesium-widget-cesiumNavigationContainer'
  cesiumWidget.container.appendChild(container)

  this.terria = viewerCesiumWidget
  this.terria.options = (defined(options)) ? options : {}
  this.terria.afterWidgetChanged = new CesiumEvent()
  this.terria.beforeWidgetChanged = new CesiumEvent()
  this.container = container

if (!sscc.enableTilt || !sscc.enableRotate) {
        return
      }
      break
    case SceneMode.SCENE2D:
      if (!sscc.enableTranslate) {
        return
      }
      break
  }

  // Remove existing event handlers, if any.
  document.removeEventListener('mousemove', viewModel.orbitMouseMoveFunction, false)
  document.removeEventListener('mouseup', viewModel.orbitMouseUpFunction, false)

  if (defined(viewModel.orbitTickFunction)) {
    viewModel.terria.clock.onTick.removeEventListener(viewModel.orbitTickFunction)
  }

  viewModel.orbitMouseMoveFunction = undefined
  viewModel.orbitMouseUpFunction = undefined
  viewModel.orbitTickFunction = undefined

  viewModel.isOrbiting = true
  viewModel.orbitLastTimestamp = getTimestamp()

  var camera = scene.camera

  if (defined(viewModel.terria.trackedEntity)) {
    // when tracking an entity simply use that reference frame
    viewModel.orbitFrame = undefined
    viewModel.orbitIsLook = false

'use strict';
const Cesium = require('cesium');
const mime = require('mime');
const addBuffer = require('./addBuffer');
const ForEach = require('./ForEach');
const getImageExtension = require('./getImageExtension');
const mergeBuffers = require('./mergeBuffers');
const removeUnusedElements = require('./removeUnusedElements');

const defaultValue = Cesium.defaultValue;
const defined = Cesium.defined;
const WebGLConstants = Cesium.WebGLConstants;

// .crn (Crunch) is not a supported mime type, so add it
mime.define({'image/crn': ['crn']}, true);

// .glsl shaders are text/plain type
mime.define({'text/plain': ['glsl']}, true);

module.exports = writeResources;

/**
 * Write glTF resources as data uris, buffer views, or files.
 *
 * @param {Object} gltf A javascript object containing a glTF asset.
 * @param {Object} [options] Object with the following properties:
 * @param {String} [options.name] The name of the glTF asset, for writing separate resources.
 * @param {Boolean} [options.separateBuffers=false] Whether to save buffers as separate files.

const ForEach = require('./ForEach');
const numberOfComponentsForType = require('./numberOfComponentsForType');
const readAccessorPacked = require('./readAccessorPacked');
const removeUnusedElements = require('./removeUnusedElements');
const replaceWithDecompressedPrimitive = require('./replaceWithDecompressedPrimitive');
const splitPrimitives = require('./splitPrimitives');

const arrayFill = Cesium.arrayFill;
const Cartesian3 = Cesium.Cartesian3;
const Check = Cesium.Check;
const clone = Cesium.clone;
const ComponentDatatype = Cesium.ComponentDatatype;
const defaultValue = Cesium.defaultValue;
const defined = Cesium.defined;
const RuntimeError = Cesium.RuntimeError;
const WebGLConstants = Cesium.WebGLConstants;

// Prepare encoder for compressing meshes.
const encoderModule = draco3d.createEncoderModule({});

module.exports = compressDracoMeshes;

/**
 * Compresses meshes using Draco compression in the glTF model.
 *
 * @param {Object} gltf A javascript object containing a glTF asset.
 * @param {Object} options The same options object as {@link processGltf}
 * @param {Object} options.dracoOptions Options defining Draco compression settings.
 * @param {Number} [options.dracoOptions.compressionLevel=7] A value between 0 and 10 specifying the quality of the Draco compression. Higher values produce better quality compression but may take longer to decompress. A value of 0 will apply sequential encoding and preserve face order.
 * @param {Number} [options.dracoOptions.quantizePositionBits=14] A value between 0 and 30 specifying the number of bits used for positions. Lower values produce better compression, but will lose precision. A value of 0 does not set quantization.
 * @param {Number} [options.dracoOptions.quantizeNormalBits=10] A value between 0 and 30 specifying the number of bits used for normals. Lower values produce better compression, but will lose precision. A value of 0 does not set quantization.
 * @param {Number} [options.dracoOptions.quantizeTexcoordBits=12] A value between 0 and 30 specifying the number of bits used for texture coordinates. Lower values produce better compression, but will lose precision. A value of 0 does not set quantization.

var oldTransform

    if (viewModel.navigationLocked) {
      return true
    }

    if (defined(viewModel.orbitFrame)) {
      oldTransform = Matrix4.clone(camera.transform, oldTransformScratch)

      camera.lookAtTransform(viewModel.orbitFrame)
    }

    // do not look up/down or rotate in 2D mode
    if (scene.mode === SceneMode.SCENE2D) {
      camera.move(new Cartesian3(x, y, 0), Math.max(scene.canvas.clientWidth, scene.canvas.clientHeight) / 100 * camera.positionCartographic.height * distance)
    } else {
      if (viewModel.orbitIsLook) {
        camera.look(Cartesian3.UNIT_Z, -x)
        camera.look(camera.right, -y)
      } else {
        camera.rotateLeft(x)
        camera.rotateUp(y)
      }
    }

    if (defined(viewModel.orbitFrame)) {
      camera.lookAtTransform(oldTransform)
    }

    // viewModel.terria.cesium.notifyRepaintRequired();

private calcNextLocation(from: ICartesian3Location,
                           destinationNode: PathNode,
                           characterId,
                           updateDistanceMeters: number) {
    const currentPosition = new Cesium.Cartesian3(from.x, from.y, from.z);
    const destPosition = destinationNode.location;
    const finalPosition = new Cesium.Cartesian3(
      destPosition.x,
      destPosition.y,
      destPosition.z
    );

    const distance = Cesium.Cartesian3.distance(currentPosition, finalPosition);

    // Check if reached destination node
    if (distance < updateDistanceMeters) {
      const newDestinationPath = this.getRandomLocation(destinationNode.points);
      this.bgCharacterToNextLocation.set(characterId, newDestinationPath);

      return this.calcNextLocation(from, newDestinationPath, characterId, updateDistanceMeters);
    }

    let interpolate = updateDistanceMeters / distance;