What is the cesium

CesiumJS is an open source JavaScript library for creating world-class 3D globes and maps with the best performance, precision, visual quality, and ease of use. CesiumJS is used by developers in industries ranging from aerospace to smart cities to drones to create interactive Web applications to share dynamic geospatial data.

CesiumJS is released under the Apache 2.0 license and is free for commercial and non-commercial use.

Source address github.com/CesiumGS/ce…

1.Cesium local environment construction

The latest release code can be downloaded from cesium.com/learn/cesiu…

  1. After downloading, unzip the directory and open it with vscode

  2. Install resources first

cnpm install
Copy the code
  1. Run locally
cnpm start
Copy the code
  1. The interface is displayed after running

5. Click HelloWorld to see the basic example demo

6.HelloWorld code analysis

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <! -- Use correct character set. -->
    <meta charset="utf-8" />
    <! -- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <! -- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <! -- Introducing Cesium. Js, which defines Cesium objects
    <script src=".. /Build/Cesium/Cesium.js"></script>
    <style>
      @importurl(.. /Build/Cesium/Widgets/widgets.css);html.body.#cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <! Define cesium elements to render -->
    <div id="cesiumContainer"></div>
    <script>
      // Perform create cesium render
      var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
  </body>
</html>
Copy the code

2.Cesium directory structure

2.1. Root path files

  • Changes.md: The history of CHANGES in each version of Cesium and what features were fixed in each version
  • Gulpfile.cjs: records all the packaging process of Cesium, including the escape of GLSL syntax, the packaging of compressed and uncompressed library files, the generation of API documents and automated unit tests, etc
  • Index. HTML: The home page of the Web navigation
  • Package. json: a dependency management file for packages, including the package name, version number, description, official website URL, author, main entry file for the program, list of development and production dependencies, and execution scripts
  • Readme. md: An introductory manual for a project that describes the use, features, and so on of the entire project
  • Server.cjs: Cesium built-in Node server file, NPM run start command and NPM run startPublic actually executed file

2.2. The Apps folder

  • CesiumViewer: A simple Cesium initialization example
  • SampleData: All the data used by the sample code, including JSON, geoJson, TopoJSON, KML, CZML, GLTF, 3DTiles, images, etc
  • Sandcastle: Ceisum sample program code is stored in this folder, interested children can review each sample code, is sure to learn new
  • TimelineDemo: Timeline sample code

2.3. The Build folder

  • Cesium: Packed Cesium library file (compressed)
  • CesiumUnminified: Packed Cesium library file (uncompressed), reference this file to make it easy for developers to debug and find specific code locations for program exceptions or errors
  • Documentation: Packaged API Documentation

2.4. The Source folder

The Source folder is the most important part of the Cesium project. The Source code of all the classes involved and the custom shader (rendering) Source code are stored in this folder. Interested children can read the Source code to study the implementation principle of each class, attribute, method and event.

2.5. The Specs folder

Cesium adopts Jasmine framework for unit testing, which can realize automatic testing of interfaces and statistical effects such as interface coverage.

2.6. The ThirdParty folder

External third-party libraries that Cesium relies on for interface implementation and unit testing, such as code editor Codemirror, unit testing framework library Jasmine, Javascript syntax and style checker Jshint, etc.

3.Cesium interface components are hidden

After the initialization interface component function is used, you basically know what function, but the actual development must hide these default functions, develop your own UI interface

3.1. Control through JS Configuration Items (recommended)

    var viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false.// Animation widget
      baseLayerPicker: false.// Select 3D Digital Earth and Terrain.
      fullscreenButton: false.// Full screen component
      vrButton: false./ / VR model
      geocoder: false.// Geocoding (search) component
      homeButton: false.// Home page, click to jump to the default view
      infoBox: false./ / information box
      sceneModePicker: false.// Scene mode, toggle 2D, 3D and Columbus View (CV) modes.
      selectionIndicator: false.// Whether to display the selection indicator component
      timeline: false./ / the timeline
      navigationHelpButton: false.// Help tips on how to operate digitalGlobe.
      // True if the navigation instructions should be seen initially; If the prompt is not displayed until the user explicitly clicks the button, otherwise false.
      navigationInstructionsInitiallyVisible: false});/ / hide the logo
    viewer._cesiumWidget._creditContainer.style.display = "none";
Copy the code

3.2. Hide the controls through CSS styles

   /* Use CSS to control component display and location */
    .cesium-viewer-toolbar./* Upper right button group */
    .cesium-viewer-animationContainer./* Lower left animation control */
    .cesium-viewer-timelineContainer./* Time line */
    .cesium-viewer-bottom               /* Logo information */ {
      display: none ! important;
    }

    .cesium-widget-credits  /* Hide the logo */ {
      display: none ! important;
    }

    .cesium-viewer-fullscreenContainer  /* Full screen button */ {
      display: none ! important;
      position: absolute;
      top: 0;
    }
Copy the code