preface

Since last year without contact Cesium 3 d GIS visualization, into the pit to until now, is already written several projects, also met a lot of middle hole, have long wanted to share the gains, just don’t feel too professional and don’t have much time, until now, from the beginning contact Cesium, add a QQ communication group, From 200 to 3,000, it seems like more and more people are using Cesium for visual direction, and many of them are like me, halfway down the pit from the front end

I remember it seems that the public account “Cesium Chinese website” once published an article called “Cesium only visualization”. I think it’s great. Although Cesium can do more than just visualization, most people who choose to invest in it are oriented towards visualization. And that goes from 300 to 3,000

My personal writing habit is very long and the output of articles is always very slow. There are about three reasons why I want to write this series of articles

  • Cesium is, after all, a world classJavaScriptOpen source products, CS was fine, but do BS, especially visual product is need a solid basis of front-end, compared to the professional GIS for front some framework to understand I don’t think too much, is not a good knowledge of GIS himself or some very powerful features on the front end of cool, after all, more powerful, You can’t be admired without carving and embellishing
  • In the past two years, too many front-end students have entered Cesium halfway. However, due to the lack of a solid GIS foundation, it is not easy to achieve the effect of GIS core, and there are too many stumbles along the way. This is my personal experience and very painful
  • Cesium, has been in their own groping, the project has written a lot of, but there are certainly a lot of places in the more professional people seem to be a joke, so water and water articles look into their brain knowledge of what is the bomb, a review of the platoon mine, check the missing

Actually my personal experience, the CS has no BS do visual experience in some projects, but to be honest, only know fur, but along the way to climb the pit of too much, so I can share with you some climbing pit experience, to enrich themselves, also involved in the GIS not very deep, but in general or can be, take you into the introduction, Also hope that we can check and fill the gaps together, is the so-called when there is no tiger among the mountains, the monkey calls the king, yes, I am the monkey, who let Cesium related technology is less hot

Write the post current idea is in addition to the entry will be more inclined to all kinds of fun dazzle cool effect production, so it will be more inclined to actual combat series, you can also regard it as an entry level tutorial, this series I try to each brief, control in 5000 words, let everyone look at comfortable 😄

PS:

  • CS refers to Client/Server, Client/Server mode, desktop level application, fast response, strong security, strong personalized ability, fast response data, poor compatibility, no cross-platform, high development cost

  • BS refers to Browser/Server, Browser/Server mode, Web application, can achieve cross-platform, client zero maintenance, strong sharing, but less personalized ability, slower response speed

Show off in an ostentatious manner the

When you read this article, you may know something about Cesium, or you may not know anything about Cesium, and you may not even know what it can do. First, LET me show you the first Cesium based visualization product that I made when I first entered the pit. Now it looks quite ordinary, but when I made it at that time, I was really happy and had a sense of achievement. And also to give you a little bit more insight into Cesium, and of course this project is just using Cesium, it’s much more than that

  • Online preview computer configuration low or view GIF

  • GIF preview compression is more powerful, hd preview video can go to the public number “not serious front end” view

So without further ado, let’s get to know Cesium

Cesium profile

What is a Cesium

Cesium is a 3d earth and map oriented, world-class JavaScript open source products, it provides a development package based on JavaScript language, convenient for users to quickly build a zero plug-in virtual Earth Web application, and in performance, accuracy, rendering quality and multi-platform, Ease of use is guaranteed by high quality

Cesium is an open-source program with the Apache2.0 license, which is freely available for commercial and non-commercial use. Its Incorporation with AGI, former engineers in the aerospace division of general motors, STK (System/Satellite Toolkit Kit) and Cesium are provided. The company is the leader of aerospace analysis software, while STK is the flagship product of the company. For example, STK software was used in the search and rescue process of Malaysia Airlines MH370. After years of accumulation of spatio-temporal data, AGI has gradually mastered a large amount of 3D visualization technology and felt the strong demand for massive 3D data from various industries. Therefore, in 2011, AGI created CesiumJS open source project. Cesium ecosystem to create a set of safe, reliable, easy to expand and platform independent enterprise solutions

In February 2011, Chrome launched the first version of WebGL. Cesium, the chemical Cesium, is the key element in atomic clocks. The naming highlights Cesium’s focus on real-time visualization applications based on spatiotemporal data

With over 1,000,000 downloads to date, CesiumJS is a powerful application for millions of users

As a front-end programmer, I just do visualization. In fact, in my opinion, Cesium has no essential difference with Leaflet and OpenLayer, but Cesium supports 3D scenes and so on, which is more beautiful

What can Cesium do

Support global level of high precision terrain and imaging services

Support 2D, 2.5D, 3D form of map display, the real integration of two and three dimensions

Support vector and mass model data (tilt, BIM, point cloud, etc.)

Support dynamic data visualization based on timeline

Cesium browser compatibility

Before learning and using Cesium, you should first check whether your browser supports WebGL. Currently, most platforms and browsers support WebGL. Running Cesium in these environments is not a big problem, but there are many details and additional factors to consider if the effect and performance can meet different needs

Most platforms and browsers support the WebGL1.0 standard, also known as the OpenGL ES2.0 specification. In early 2017, the new version of Chrome quietly supports WebGL2.0. As GPU performance improves across hardware vendors and the WebGL2.0 specification matures, WebGL technology has more potential to improve, but Chrome is the best platform for WebGL development and applications on both PC and mobile, so if there are no specific requirements, it is recommended to use Chrome to learn and develop Cesium

You can visit WebGL Report in your browser to check your browser support

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

In addition to showing whether or not your browser supports the WebGL standard, the listing goes on for example

  • Whether deep textures are supported
  • The maximum number of attributes for the vertex shader
  • Whether the ANGLE extension is supported
  • , etc.

A HelloWorld program

In fact, the above are nonsense, but you must know, in fact, for us to write a program is not a little help, just to provide data for everyone to understand Cesium’s powerful

Some people may think that before learning Cesium, you should learn GIS infrastructure, coordinate systems, projections, storage types and so on. In fact, I think if you have such common knowledge, it is great, but if you don’t have such knowledge, it is not necessary to learn Cesium at the beginning

Because these basic knowledge is easy to polish enthusiasm, it is better to write a few demo programs to reality, after all, must first experience its charm, just like you are walking on the road, you see a pit in front of you, it will certainly go around, but if there are some grass pit, there are some beautiful flowers, that is different

SO, let’s start with the earth, where do we need to intersperse some common sense

Compiler selection

VS Code is a handy tool, but if you’re not used to other compilers, you can use notepad

Download the Cesium package

First of all, we need to download the Cesium package, which can be downloaded from the official website. Cesium will be updated every month and constantly iterating, which is enough to prove its vitality and future. The address is 👇

  • Cesium Download

Download it and unzip it and you’ll find a lot of files, as shown below

This package includes the Cesium API Source folder, and the compiled Build folder, as well as Demo, API documentation, sandbox, and so on

All we need is the Cesium folder under the Build folder, which is the official version of the compiled Cesium package, and that’s all we need for development

Initializing the Earth

First, let’s find a place to create a new directory called demo, and we’ll drag the Cesium folder in here

Next, we create a new index.html file in the demo directory and initialize the earth in four steps

No.1 introduces cesium. Js, which defines cesium objects and contains everything we need

<script src="./Cesium/Cesium.js"></script>
Copy the code

No.2 introduces widgets. CSS in order to use Cesium visual controls

@import url(./Cesium/Widgets/widgets.css)
Copy the code

No.3 In the BODY of the HTML we create a div, which is used as a container for the 3d earth

<div id="cesiumContainer"></div>
Copy the code

No.4 Initializes the CesiumViewer instance in JS

let viewer = new Cesium.Viewer('cesiumContainer')
Copy the code

The complete code is as follows

<! DOCTYPEhtml>
<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>

Copy the code

Runtime environment

Usually we write a page, the browser can open the HTML file, when writing Cesium program, do not double-click the browser locally to run, because in actual work, 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 the computer, this is not more verbose, do not know their own Baidu installation can be

The official website includes the general tutorial at this time will be handwritten code express or Koa simple build a Web service, but this is not necessary, here we just write a demo, there is no need to write back-end code, too much trouble, we install a live-server

Live-server is a small server with real-time loading capability. Simply put, you install it and run the command directly from the current directory command line

To install the live-server, run the following command

npm install -g live-server
Copy the code

Again, this is just a small demo. In general, Vue+Cesium is the best practice in normal project development, while vuE-CLI is a native service, and live-server is fine if we want to develop it native. Although it’s not hard to write a Web service, it’s a waste of time

Once we have Node installed and the live-server installed, we will run the following command from the terminal CD to the project root directory

live-server
Copy the code

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

Next, type http://127.0.0.1:8080 directly into your browser and your first Cesium program 👌

As shown above, a 3D earth will appear on the page, isn’t it very simple, does it arouse your desire?

Next time, we will talk about the use of Cesium in Vue development and some matters needing attention. Step by step, a watched pot never grows hot. At the end of each article, I will list some relevant learning addresses for you

The last

A few must-know sites for getting to know Cesium

  • Cesium official tutorial Cesium out of the official tutorial, English, can be translated to see

  • Cesium API English official document Cesium API too much, but do not know the API can be checked, but also In English

  • Cesium API Chinese document Cesium Chinese translation API document, not quite complete, but preliminary affirmation is enough

  • Cesium Sandcastle sandbox example some examples of Cesium official procedures, nothing can be more around

  • Cesium Chinese website, which has a series of tutorials, some are free, you can learn a lot of knowledge

If you’re new to Cesium, you should go to any of these sites anyway, just go through them briefly, and you’ll use them later, right

This article is posted on GitHub. For more highlights, see isboyjc/blog/issues

Is the front end, and not just the front end, so not serious, seriously share dry goods, public number “not serious front end”, welcome to pay attention to