Brief introduction of Cesium

Cesium is a world-class JavaScript open source product for 3D earth and maps. It provides a development package based on JavaScript language, which facilitates users to quickly build a virtual earth Web application with zero plug-ins, and has high-quality guarantees in performance, accuracy, rendering quality, multi platform, and ease of use.

Cesium is an open source program licensed under Apache 2.0. It can be used for commercial and non-commercial purposes for free. It belongs to AGI (Analytical Graphics Incorporation). The three founders worked as engineers in the Aerospace Department of General Motors, providing STK (System/Satellite Toolkit Kit) and Cesium products. The company is the leader of aerospace analysis software, and STK is the flagship product of the company, for example, Malaysia Airlines MH370 used STK software in the search and rescue process. After years of accumulation of spatiotemporal data, AGI gradually mastered a large number of 3D visualization technologies, and felt the strong demand for massive 3D data from all walks of life. Therefore, it created the CesiumJS open source project in 2011, creating a set of safe, reliable, easy to expand and platform independent enterprise level solutions around the Cesium ecosystem.

Chrome also launched the first version to support WebGL in February 2011. In this regard, Cesium is the first person who dares to eat crabs. Cesium originally means the chemical element cesium, which is the key element in the manufacture of atomic clocks. The naming emphasizes that Cesium products focus on real-time visualization applications based on time-space data. Up to now, CesiumJS has more than 1000000 downloads, which is a powerful application for millions of users As a front-end programmer, I only do visualization. In my opinion, there is no essential difference between Cesium and Leaflet, OpenLayer, etc., except that Cesium supports 3D scenes.

What Cesium can do?

Support global level high-precision terrain and image services, support 2D, 2.5D and 3D map display, and truly integrate 2D and 3D, support vector and mass model data (tilt, BIM, point cloud, etc.) support visual display of dynamic data based on time axis.

Cesium's browser compatibility

Before learning and using Cesium, you should first check whether your browser supports WebGL. At present, most platforms and browsers support WebGL, running Cesium in these environments is not a big problem, but whether the effect and performance can meet different needs requires consideration of many details and additional factors.

Most platforms and browsers support the WebGL 1.0 standard, that is, the OpenGL ES2.0 specification. At the beginning of 2017, the new version of Chrome low-key supports WebGL 2.0. With the improvement of the GPU performance of hardware manufacturers and the maturity of the WebGL 2.0 specification, the WebGL technology will have greater potential for improvement. However, regardless of whether it is a PC or a mobile terminal, Chrome is the best platform for the development and application of WebGL. Therefore, if there are no special hard requirements, it is recommended that you use Chrome to learn and develop Cesium.

As shown in the red box above, this browser supports WebGL 1, you can also click WebGL 2 to see your browser support.

In addition to showing whether your browser supports the WebGL standard, there are many more in the list, such as:

• Whether depth texture is supported;
• Maximum number of attributes for vertex shader;
• Whether the ANGLE extension is supported;

A HelloWorld program

In fact, all the above is nonsense, but you must know that it is not helpful for us to write programs. Just provide data in order to give you an understanding of the power of Cesium.

Some people may think that before learning Cesium, we should learn GIS infrastructure, coordinate system, projection, storage type, and so on. In fact, I think it would be great if you have this common sense, but if you don't have this knowledge reserve, at the beginning of learning Cesium, it is totally unnecessary to learn these messy things.

Because this basic knowledge is easy to learn, it is better to write a few demo programs first. After all, you have to feel its charm first, just like when you walk on the road, if you see a hole in front of you, you will definitely go around it. But if there are some grass and some beautiful flowers in the pit, it will be different. SO, let's get the earth out first, and then we need to interspersed with some common sense.

Compiler selection

Strength recommends a VS Code shuttle, of course, I am not used to other compilers. Looking at personal habits, it doesn't matter if you are strong enough to use notepad.

Download the Cesium package

First of all, we need to download the Cesium package, which can be downloaded on the official website, Cesium will be updated every month. It has been iterating, which is enough to prove its activity and future.

After downloading asnd decompressing it, you will find that there are many files, such as the following figure.

Let's download this package to include the Cesium API source code Source folder And the compiled Build folder, as well as Demo, API documents, sandboxie and so on. All we need is the Cesium folder under the Build folder, it is the official version of the compiled Cesium package, and that's all you need for development.

Initialize the Earth

First, let's find a place to create a new directory, which is called demo, let's drag in the folder Cesium mentioned above. Next, we create a new index.html file in the demo directory and initialize an earth in four steps.

No.1 Introduces cesium.js, which defines the Cesium object contains everything we need.

<script src="./Cesium/Cesium.js"></script>

No.2 Introduces widgets.css in order to use various visual controls of Cesium.

Import url (. / Cesium/Widgets/widgets.css)

No.3 Create a div in the HTML body to serve as a container for the 3D Earth.

<div id="cesiumContainer"></div>

No.4 Initializes the CesiumViewer instance in JS.

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

The complete code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./Cesium/Cesium.js"></script>
<style>
Import url (. / Cesium/Widgets/widgets.css)
Html,body,#cesiumContainer {
Width: 100%
Height: 100%
Margin: 0
Padding: 0
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Window.onload = function () {
Let viewer = new Cesium.Viewer ("cesiumContainer")
}
</script>
</body>
</html>

Operation environment

Usually we write a page, the browser can open the html file, when writing Cesium programs Do not double-click the browser locally to run, because in practice it needs to run on the Web server.

Here we use Node to build this service. First of all, you need to install Node on your computer, which is not too much detail. Do not understand their own Baidu installation.

The official website includes general tutorials. At this time, handwritten code will be used to simply build a Web service with express or Koa. But this is not necessary, here we just write a demo, there's no need to write back-end code, it's too troublesome, let's just install a live-server.

Live-server is a small server with real-time loading function, to put it simply, you install it and run the command directly from the command line in the current directory and the service gets up.

Install the live-server command as follows:

Npm install-g live-server

Again, it's just a little demo, generally speaking, Vue+Cesium is the best practice in normal project development, and using Vue to develop, Vue-CLI itself is a local service. Live-server is fine if we want to develop natively, although it's not difficult to write a Web service, but it's a waste of time.

When we have installed Node and installed live-server, we execute the following command in the terminal cd to the project root directory.

Live-server

Port 8080 is started by default, as shown in the following figure.

Then, type http://127.0.0.1:8080 directly into the browser, your first Cesium program is ok.