Cesium Chinese Documentation on Coinidea's Blog

[CesiumJS]Sharing a Chinese Community for Learning CesiumJS

Thu, 28 Jun 2018 07:23:08 +0000

In the timeline of the CesiumJS Chinese community, I wrote:

**June 9, 2021 * QQ Group 807482793, group members reached 3000, daily UV 600+, Cesium Chinese Website Group 2: 811457177

**November 5, 2020 * **QQ Group 807482793, group members exceeded 2000, WeChat group reached 500 members, created WeChat Group 2.

**November 26, 2019 * ** Registered users exceeded 400, QQ Group 807482793, group members exceeded 1000, daily UV 300+

**May 13, 2019 * **WeChat group reached 100 members within 2 hours. To join the group, please add the Cesium Chinese Website personal account:

May 9, 2019 * Registered users exceeded 200, QQ Group 807482793, group members exceeded 450

December 20, 2018 * Registered users exceeded 100, QQ Group 807482793, group members exceeded 170

November 6, 2018 * 65 registered users, QQ Group 807482793, group members exceeded 100

October 10, 2018 * 51 registered users, daily UV exceeded 100 http://blog.coinidea.com/cesiumjs-1332.html

June 22, 2018 * Launched for testing

June 19, 2018 * Acquired the cesiumcn.org domain, also accessible at cesium.coinidea.com

May 6, 2018 * Started secondary development of CesiumJS

April 21, 2015 * Reviewed the C# version of WorldWind code * Implemented a simple data visualization plugin based on the C# WorldWind version

September 1, 2012 * Started working with the C++-based OSSIM source code

April 1, 2009 * Started getting involved in various aspects of web development, from HTML, CSS, JavaScript to JSP, ASP.NET, PHP, jQuery, LAMP, then SSH, ThinkPHP, Yii, LNMP, then SSM, Node.js, VUE… As you can see, I have some experience in web development and have been intermittently exposed to many GIS-related open-source systems. With the frontend, especially Node.js, becoming increasingly mature, and browsers offering better support for HTML5 features, I believe CesiumJS will find broad application in industrial-grade scenarios and most B/S architectures. I have also started using, familiarizing myself with, and learning its related APIs.

As a developer, I’ve always had a certain passion — something beyond profit that is more technology-oriented. So I registered an org domain, http://cesiumcn.org, and created an open-source Web GIS community called Cesium Chinese Website. I hope everyone will support it. You can ask questions in the community or browse this blog.

[CesiumJS]Cesium Getting Started 3 – Cesium Directory and Framework Structure

Fri, 10 Aug 2018 09:13:46 +0000

App Directory

After downloading the files from the official website, we can see the following CesiumJS library structure:

Source/: Cesium application code and data
ThirdParty/: External dependency libraries, third-party libraries separate from Cesium
LICENSE.md: Cesium license information
index.html: Web homepage, which needs to be defined according to Cesium requirements and include Cesium dependency libraries
server.js: Node.js-based web server application

Note

CesiumJS is adapted to work with third-party JavaScript libraries and frameworks:

React: Integrating Cesium with React

ThreeJS: Integrating Cesium with ThreeJS

Page Structure

Including CesiumJS

1

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

Developers can also pick and choose their dependency libraries from ThirdParty/Cesium/source/ according to their needs, trimming the JS file size.

HTML Structure

A div is needed as the container for the Cesium Viewer widget:

1

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

An app.js file is needed to activate the Cesium Viewer. It’s best to include app.js at the end of the HTML:

1

<script src="Source/App.js"></script>

Adding CSS Styles

The styles for various widgets in the Cesium viewer need to be imported. Create a new index.css and include it in index.html:

1

<link rel="stylesheet" href="index.css" media="screen">

Add the following default Cesium CSS to index.css:

1

@import url(ThirdParty/Cesium/Widgets/widgets.css);

Steps

Open Source/App.js and delete its contents
Copy Source/AppSkeleton.js to Source/App.js
Make sure server.js is in the Cesium root directory and run server.js (npm server.js)
Enter localhost:8080 in a modern browser (with WebGL support)

If you have any issues:

Full code: https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=8d9d3daadd197cffd501d7210bcca3b6

Cesium Chinese Website QQ Group: 807482793

Original link: http://cesiumcn.org/topic/144.html | Quick access: http://cesium.coinidea.com/topic/144.html

[CesiumJS]Cesium Getting Started 2 – Environment Setup and First Example Program

Fri, 10 Aug 2018 03:11:34 +0000

Verify Browser Support

Cesium requires browser support for WebGL. You can test whether your browser supports Cesium using a HelloWorld example provided on the CesiumJS official website. (Chrome is recommended) Test URL: https://cesiumjs.org/Cesium/Apps/HelloWorld.html

Choose an IDE

The official website states:

1

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’re already an experienced developer, you likely have a preferred editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, Notepad++ is a great free and open-source editor that you can download from their website. Ultimately, any text editor will work, so use whatever you’re most comfortable with.

Personally, since I mostly developed in PHP before, I use PHPStorm. I actually don’t recommend Eclipse — I prefer WebStorm, which shares the same parent as IntelliJ IDEA. Considering project and folder management, I also don’t recommend Notepad++. For a lightweight IDE, I recommend Sublime Text.

Download Cesium Source Code

Download the latest release version at: https://cesiumjs.org/tutorials/cesium-up-and-running/

After downloading, extract the zip file into a new directory of your choice. I’ll refer to this as the Cesium root directory throughout this tutorial. The contents should look like the following:

Simply opening index.html directly won’t work — it needs to be placed in a web server container to run.

Server Side

Cesium is pure frontend code. The official source code comes with a Node.js server, and you can install and deploy via Node.js. In practice, Cesium can be deployed in Tomcat (GeoServer), Apache, Nginx, and other servers.

The official recommendation is Node.js:

Download Node.js from the official website (https://nodejs.org/en/). Node.js has some configurable parameters, but the defaults are fine.
In the Cesium directory, open cmd or bash and run:

1

npm install

This downloads the required npm modules such as express. If successful, a ’node_modules’ folder will be created in the Cesium directory. 3. Finally, run in cmd or bash: shell node server.js or shell npm start

After success, you should see the following screenshot:

The console will display:

1

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

Note: Do not close the console — keep it running. Open your browser and navigate to http://localhost:8080 to access Cesium.

If You Don’t Want to Use Node.js

Cesium is an open-source project. The GitHub download URL is: https://github.com/AnalyticalGraphicsInc/cesium The simplest installation method is regular JS file loading — just download the JS code from GitHub, place it in your project, and reference it in your HTML page. Like this:

Create a new helloworld.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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

1

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

Here, cesiumContainer is the id of the HTML div that displays the map. It’s that simple — open the HTML page in a browser and you’ll see a 3D globe. The base map is Microsoft imagery loaded onto the 3D globe, with basic online map features including zoom in, zoom out, and pan. It also includes a timeline and other time-related widgets, which is a distinctive feature of Cesium — its maps, objects, and scenes can all be associated with time.

Local Hello World Program

Now that the local Node server is running, open your browser and navigate to: http://localhost:8080/Apps/HelloWorld.html. You should see a Hello World 3D digital globe identical to the official one.

Hello World Code Analysis

The official Hello World code is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<!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 the HTML:

Include Cesium.js, which defines the Cesium object:

1

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

Import the Cesium Viewer widget styles:

1

@import url(../Build/Cesium/Widgets/widgets.css);

The Cesium view resides in this div:

1

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

Finally, create the Cesium viewer:

1

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

Cesium Chinese Website QQ Group: 807482793

Original link: http://cesiumcn.org/topic/138.html | Quick access: http://cesium.coinidea.com/topic/137.html

[CesiumJS]Cesium Getting Started 1 – Introduction to Cesium

Thu, 09 Aug 2018 03:28:08 +0000

Introduction to Cesium

Cesium official website: https://cesiumjs.org

The website title states:

1

An open-source JavaScript library for world-class 3D globes and maps

Cesium is an open-source JavaScript-based 3D mapping framework. Essentially, it is a map visualization framework.

The website description states:

1

CesiumJS is a geospatial 3D mapping platform for creating virtual globes. Our mission is to create the leading web-based globe and map for visualizing dynamic data. We strive for the best possible performance, precision, visual quality, ease of use, platform support, and content.

CesiumJS is a 3D geospatial platform for creating virtual scenes. Its goal is to create web-based dynamic data visualization using maps. It strives to provide the best performance, accuracy, visualization capabilities, ease of use, and platform support.

Data Formats and Features

Cesium supports 3D Tiles, Terrain and Imagery Layers, 3D Models (glTF), Vectors and Geometry (Load KML, GeoJSON, TopoJSON, and CZML), Time-Dynamic Visualization, 3D, 2D, and 2.5D Columbus View.

Supports 2D, 2.5D, and 3D geographic (map) data display
Can draw various geometric shapes, highlight regions, supports importing images and even 3D models for diverse data visualization
Can be used for dynamic data visualization with good touch support, compatible with most desktop and mobile browsers
Supports time-axis-based dynamic streaming data display

Thoughts

Thanks to the development of frontend technologies, the standardization of HTML5 and CSS3, increasingly better WebGL support from major browser vendors, growing personal computer memory, and advances in graphics cards, I can see the browser-based 3D digital globe that I’ve always wanted to build becoming a reality. I’m very excited.

Summary

Cesium is a cross-platform, cross-browser JavaScript library for displaying 3D globes and maps.
Cesium uses WebGL for hardware-accelerated graphics. No plugins are required, but the browser must support WebGL.
Cesium is an open-source project licensed under Apache 2.0. It can be used freely for both commercial and non-commercial purposes.

Cesium Chinese Website QQ Group: 807482793

Original link: http://cesiumcn.org/topic/137.html | Quick access: http://cesium.coinidea.com/topic/137.html

[CesiumJS]Sample Code for Cesium Globe Rotation

Thu, 26 Jul 2018 07:48:41 +0000

Sharing some code to make the Cesium globe rotate automatically.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var i = Date.now();

function rotate() {
 var a = .1;
 var t = Date.now();
 var n = (t - i) / 1e3;
 i = t;
 viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -a * n);
}

viewer.clock.onTick.addEventListener(rotate);
setTimeout(function() {
 viewer.clock.onTick.removeEventListener(rotate);
}, 5000);

[CesiumJS]OSGB to Cesium 3D Tiles Conversion Tool

Thu, 26 Jul 2018 07:44:58 +0000

Cesium does not support loading oblique photography OSGB data directly:

https://www.oschina.net/question/104733_2198017

However, OSGB data can be converted into a format that Cesium can load.

Currently, the best-supported format defined by Cesium is 3D Tiles. This format is still evolving and not yet fully mature, but based on official demos, the results are quite impressive.

3D Tiles adds FeatureTable and BatchTable at the logical (JSON) layer, as well as the LOD (tileset) concept, with corresponding binary storage headers. From a data specification perspective, it inherits the excellent parts of glTF while also considering oblique photography and point clouds. Support for OSM is planned for the future, providing good coverage of data types.

3D Tiles = glTF + LOD

https://www.cnblogs.com/fuckgiser/p/6565957.html

During development, I found some conversion tools shared by developers online:

https://www.v2ex.com/t/402321

https://blog.csdn.net/qq_37796475/article/details/79221939

After testing, I found that:

https://download.csdn.net/download/qq_37796475/10274378 this tool works quite well.

After downloading the conversion tool, there is an operation example image included in the directory. Feel free to leave a comment if you have any questions.

Original link: http://cesiumcn.org/topic/3.html