Introduction to Cesium 2 - Cesium Environment Construction and First Example Program

Verify Browser

Cesium needs browsers to support WebGL. It can test whether its browsers support Cesium through a HelloWorld example provided by Cesium JS official website. (Chrome is recommended)
Test address:
https://cesiumjs.org/Cesium/A...

Select IDE

The official website says:

If you're already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you're just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

If you are already an experienced developer, you probably have a favorite editor or development environment; for example, most Cesium teams use Eclipse. If you've just started, a great free and open source editor is Notepad ++, you can download it from their website. Eventually, any text editor will do it, so go with your most comfortable.

I personally developed PHP more before, so I used PHPStorm, in fact, I do not recommend Eclipse, I recommend and Idea's sibling WebStorm. Considering engineering and folder management, I don't recommend Notepad++. I recommend Sublime Text for lightweight IDE s.

Download Cesium source code

The latest release version code download address:
https://cesiumjs.org/tutorial...

After downloading, extract the zip file into the new directory of your choice, which I will refer to as the Cesium root directory throughout the tutorial. The content should look like the following.

Direct clicking on index.html is invalid and needs to be placed in the Web Server container to run.

Server end

Cesium is pure front-end code, the official source code, supporting the server side of nodejs, and can be installed and deployed through nodejs. In fact, Cesium can be deployed into tomcat (geoserver), apache, nginx and other servers.

Noejs is recommended by the official website

  1. Download Node.js from the official website( https://nodejs.org/en/), In fact, nodejs has some parameters that can be configured, using the default parameters. .
  2. In the folder directory where Cesium is located, open cmd or bash and type the command
npm install 

Download dependent npm modules, such as express, etc. If successful, it will be in the Cesium folder in the bedstead `node_modules'folder.

  1. Finally, execute in cmd or bash

    node server.js 

    perhaps

    npm start
  2. After success, you can see the following screenshot

The console will display:

Cesium development server running locally.  Connect to http://localhost:8080

Note: The console cannot be shut down and kept running all the time. Open the browser and enter http://localhost 8080 is accessible to Cesium.

If you don't want to use nodejs

Cesium is an open source project. The download address on GitHub is: https://github.com/Analytical...
The simplest way to install is to load ordinary JS files, just download its JS code from Github, put it in your own project, and reference it in the html page. As follows:

Create a new helloworld.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello 3D Earth</title>
    <script src="CesiumUnminified/Cesium.js"></script>
    <style>
        @import url(CesiumUnminified/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script src="app.js"></script>
</body>
</html>

Create a new app.js

viewer = new Cesium.Viewer('cesiumContainer');

Cesium Container shows the id of div for the map in html. That's how simple it is. When the browser opens the above HTML page, it can see a three-dimensional earth. The bottom image of Microsoft is only loaded on the three-dimensional earth, including basic online map functions such as zooming, zooming and translation, and also includes time-related controls such as time axis. This is a feature of Cesium, whose maps, objects and scenes can be related to time.

Local Hello World Program

Now that the local node service is running, open the browser and enter: http://localhost:8080/Apps/HelloWorld.html.
You can see hello wolrd's three-dimensional digital earth exactly like the official one.

hello World Code Analysis

The official hello world code is as follows:

<!DOCTYPE html>
<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>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

The following four steps add Cesium to html:

  1. Introducing Cesium.js, this javascript defines Cesium object
<script src="../Build/Cesium/Cesium.js"></script>
  1. Import the style of Cesium Viewer widget
@import url(../Build/Cesium/Widgets/widgets.css);
  1. cesium view exists in the div
<div id="cesiumContainer"></div>
  1. Eventually create cesium viewer
var viewer = new Cesium.Viewer('cesiumContainer');

Cesium Chinese Communication QQ Group: 807482793

This article is based on admin Creation, adoption Knowledge Sharing Signature 3.0 Mainland China Licensing Agreement License.
It can be reproduced and quoted freely, but the author should be signed and the source of the article should be indicated.

Tags: Javascript npm Eclipse github IE

Posted on Wed, 04 Sep 2019 20:00:41 -0700 by svguerin3