Reprinted from: http://www.cnblogs.com/fuckgiser/p/5633748.html
This series of cesium general tutorials: https://www.cnblogs.com/fuckgiser/p/5706842.html
All examples in the example can be searched in Github: ExamplesforCesium
Cesium ['siːzɪəm] is an open source JavaScript open source library, developers can create 3D spheres and 2D maps without plug-ins through Cesium. Cesium realizes hardware acceleration of graphics through WebGL technology, and is cross-platform, cross-browser, and provides the visual presentation of dynamic data.
The original meaning of Cesium is the chemical element cesium, which is the most precise standard for defining seconds and is commonly used to make fine atomic clocks. The Cesium project focuses on dynamic visualization, which is also the inherent meaning of its name Cesium.
Ready to work
- Browser
Make sure your browser supports WebGL. Chrome is recommended.
If you are not sure whether your browser supports it, you can visit the webglreport website for details. - Tomcat
uses tomcat in this series, and the default reader understands how to publish services through tomcat - If there is no special preference for the development environment
, and if your development machine is not particularly bad, it is recommended to use WebStorm. The IDE is paid, but, you know - Cesium product package
In this article, Cesium-1.25 is used. Easily available through the official website
Product package list
- Apps
Cesium's detailed sample program, it is recommended to copy it by yourself, there will be a lot of gains - Build
Release package, packaged scripts and CSS, Workers, etc., and documentation - Source
source code - Specs
Cesium's automated unit testing uses the Jasmine framework, which is also very useful. It can achieve statistical effects such as automated testing frameworks and interface coverage. There will be a specific chapter to introduce the meeting. - Other
gulpfile.js: packaging scripts, which will be introduced later
Hello，World
When you see index.html, I believe you can't help double-clicking. Unfortunately, WebGL does not allow opening as a local file for security reasons. Therefore, you need to put the Cesium folder under webapps in tomcat and publish it as localhost. (If you don't know how to publish a website in tomcat, don't worry, the process is very simple, Google it, I believe there will be many related blog posts for reference.)
Below, we try to complete a page and create a Cesium 3D sphere.
First, create a new examples folder and create a new file hello.html in the examples folder to implement our first example.
Next, paste the following code in hello.html:
The content of the code is as follows: 1. Introduce the Cesium.js script and the corresponding css file, and we have completed the loading of the relevant scripts; 2. At the same time, create a div with id=cesiumContainer, and create a Cesium.Viewer window, which corresponds to the one just created. div. Running the html file, we easily created the first WebGL Globe, the effect is as follows:
Hello World2
As above, we experienced a Cesium with ease and joy, but this is only a small step in a long journey. The beginning of everything is difficult, so this head must be done well.
There is no problem with the above hello.html itself, but for developers, it is more or less necessary to load it in source code mode, which is convenient for debugging and problem location, but the above example directly loads the Release script under Build, for developers Slightly insufficient, let's upgrade this example below.
Cesium adopts the Require.js framework, and interested students can learn about the basic concepts of Require.js online. We download the require.min.js script, save it in the Cesium/examples/js/ folder, and manage the script uniformly. And in the examples folder, create a new hello2.html.
In hello2.html, the code is as follows:
Similar to the code of hello.html, but instead of directly referencing the Cesium.js script under Build, we refer to the require.js script:
<script src="./js/require.min.js" data-main="./js/main"></script>
The data-main attribute can specify the first file loaded after the require script is loaded, here is main.js (saved under Cesium/examples/js/).
The code in main.js is as follows:
In this script, the variabledevelopMode to record whether the script is loaded in Release or source code mode, and set the corresponding file path according to the variable value. Finally, call the onload function to end the mission of the main.js script.
Onload function? Where is this function defined? It is not difficult for careful users to find that the implementation of this function is in hello2.html. In this function, the user creates a div and creates a Cesium.Viewer window to bind the div to realize the loading of the three-dimensional ball. Its logic is the same as that of hello.html Exactly the same, just wrapped in the onload function.
In this way, we have basically completed a complete example, you can set the value of developMode and choose whether to load the source code for debugging.