[Heel]
1 Overview
Feel the Internet has a lot of tutorials on cesium, but the fastest way to learn a framework is a familiar example of their own. Provides a series of examples on the site cesium, cesium wanted to learn the knowledge through these examples are summarized; of course, if there are other examples, will be summarized together.
Downloaded from the official website build cesium include source code, help content data, Sandcastle examples, etc., and can be established on the site of the release of cesium, which can consult the documentation, examples of learning through Node.JS and so on.
To use the cesium in general, need to build a server, so that cesium use within the domain of the server. But in fact, not so complicated, if only to learn, you can set the browser cross-domain, so that cesium can also be run, after all, cesium is based front-end framework for WebGL, and has nothing to do with the basic background. Browser settings across domains in their own way to online search solutions, a variety of different browser settings.
Examples of cesium own position as shown below:
These examples can be dragged directly to the local cross-domain set running in a browser, you can be reached within a server running the same effect. Set a reminder of local cross-domain browser should run only instance I have written or to determine the safety of the web page, or a security risk.
2. Examples
By convention, the first step in any language or framework is HelloWorld, cesium is no exception.
2.1. HelloWorld.html
<!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 src="HelloWorld.js"></script>
</body>
</html>
This HTML code is relatively simple: the first component is introduced and cesium.js stylesheet widgets.css, both from a cesium source; div layer then creates a named cesiumContainer and set its style; and finally introduced himself to write JS code helloWorld.js.
2.2. HelloWorld.js
"use strict"
//Add your ion access token from cesium.com/ion/
Cesium.Ion.defaultAccessToken = '----';
var viewer = new Cesium.Viewer('cesiumContainer');
HelloWorld.js more simple, only a code created by the digital earth component contains several components. Note that the default creation of Digital Earth layers included in Bing Maps Token support is needed, you can apply for a cesium official website. Otherwise, the planet may not be displayed.
3. Results
The results of the run in the browser as follows:
