Welcome to the Cesium community!We're happy to have you.In order to get you developing your
own web map application as soon as possible,
this tutorial walk you through the development of a simple Cesium applicationn from beginning
to end.This tutorial will touch on many of
the most important aspects of the Cesium API,but is no means comprehensive
(Cesium has a lot of features!).Our goal is to introduce the
fundamentals and the tools you'll need to explore the rest of Cesium.
We'll create a simple application for visualizing sample geocache locations in New York City.
We'll load
and style multiple types of 2D and
3D data and create several camera and display options that a user can set interactively.Finally,
as high-tech geocachers, we'll load a 3D
drone model to scout the geocache location for us to take full advantage of our 3D visualization.
By the end of this tutorail,you will have a working overview of Cesium's features and know how to
configure a Cesium viewer,
load datasets, create and style geometry, work with 3D Tiles, control the camera, and add mouse
interactivity to your application.
Setup
Just a few setup steps before we can get to development.
1.make sure your system is Cesium compatible by visiting Hello World.No globe?See Troubleshooting.
2.Install Node.js.
3.Get the workshop code.Either clone or download the zip and extract the contents.
4.In your console, navigate to the root cesium-workshop directory.
5.Run npm install.
6.Run npm start.
The console should tell you "Cesium development server running locally. Connect to
http://localhost:8080/".Don't close the console!We'll need
to keep this process running.
Next,navigate to localhost:8080 in your brower. You should see our workshop application up
and running. Stuck? The Getting Started Tutorial
goes more in depth about Cesium setup.
The Application Directory
Now for a tour of our application directory!Note that this application directory was
designed to be as simple as possible,and totally ignores the
many varied modern JS frameworks in use today. But once you have a handle on things
,feel free to experiment!
Source:Our application code and data.
ThirdParty : External libraries, in this case just Cesium.
License.md : Terms of use for this application.
index.html : Our main html page.
server.js : The server we'll run our application from.
Now take a look at index.html. This create a div for our Cesium widget and
a few basic input elements. Observe that Cesium Widget is just an
ordinary div that can be styled and interacted with like any other div.
There are a few crucial lines to set this up:
First we include Cesium.js in a script tag in the HTML head. This defines the Cesium object,
which contains the entire Cesium library.
<script src = "ThirdParty/Cesium/Cesium.js"></script>
Cesium ships with a collection of widgets that require this CSS.
<style>@import url(ThirdParty/Cesium/Widgets/widgets.css);</style>
In the HTML body,we create a div for the Cesium Viewer widget.
<div id = "cesiumContainer"></div>
Finally, in another script tag we add the JavaScript for the app at the end of the HTML body,
<script src = "Source/App.js"></script>
That's about it! The rest of the HTML in this file is for collecting user input,
which we'll use later.
Development Resources
For this tutorial and throughout the rest of your Cesium development career,
we encourage you to rely on the following resources:
Reference Documentation : A complete guide to the Cesium API containing many code snippets.
Sandcastle:A live-coding environment with a large gallery of code examples.
Tutorial:Detailed introductions to areas of Cesium development.
Cesium Forum: A resource for asking and answering Cesium-related questions.
Any time you get stuck, odds are one of these resources will have the answers you're looking for.
The Workflow
To follow along with this tutorial:
1.Open Source/App.js in your favorite text editor and delete the contents.
2.Copy into Source/App.js the contents of Source/AppSkeleton.js,
which contains the commented version of the code.
3.Make sure your server is still running in the cesium-workshop directory, as described in Setup.
4.Navigate to localhost:8080.You should see a mostly black page now.
5.As the tutorial directs you, uncomment code, save Source/App.js and refresh the page to see
your new changes reflected.
Really stuck? You can follow along in sandcastle with a simplified version of the app (no UI):
The complete code
The commented code
Now let's get started!