准备开始

本教程将让所有开发人员学会Cesium应用程序运行和并提高水平。

确保你的浏览器已经准备好了

验证Cesium在web浏览器中工作的最简单方法是通过点击这里，运行Hello World示例(打开一个新窗口)。如果你看到下面的图片，恭喜你，你的系统可以运行Cesium，你可以安全地跳到下一节;否则,继续阅读。

Cesium是建立在几种新的HTML5技术上的，其中最重要的是WebGL。尽管这些新标准很快被广泛采用，但一些浏览器和系统需要更新以支持它们。如果示例应用程序不适合您，这里有一些需要尝试的东西。

更新您的web浏览器。大多数Cesium团队使用谷歌Chrome，但火狐、Internet Explorer 11和Opera也将工作。如果您已经使用了上述浏览器中的一个，请确保它已更新到最新版本。
更新你的显卡驱动，以更好地支持3D。如果你知道你有什么类型的视频卡，你可以检查供应商网站进行更新。最受欢迎的三个是:Nvidia, AMD, 和 Intel。
如果您仍然有问题，请尝试访问http://get.webgl.org/，它提供了额外的解决问题的建议。你也可以在Cesium forum（论坛）上寻求帮助。

选择编辑器或IDE

如果您已经是一个经验丰富的开发人员，那么您很可能拥有一个最喜欢的编辑器或开发环境;例如，大多数铯团队都使用Eclipse。如果你刚刚开始，一个很棒的免费和开源的编辑器是Notepad++，你可以从their website下载。最终，所有的文本编辑器都会这样做，所以你可以选择你最喜欢的那个。

下载Cesium的依赖包

假设您还没有这样做，请点击这个按钮来获取最新的Cesium版本:

Download Cesium

下载后，将zip文件解压到您选择的新目录中，我将在整个教程中作为Cesium根目录将其引用。内容应该类似下面的内容。

Cesium Contents

为了使应用程序实际工作，它需要在web服务器中运行。

设置web服务器

为了运行Cesium程序, 我们需要一个本地web服务器来承载我们的文件。我们将使用node.js和其它的教程。如果您已经有了您想要使用的web服务器，那也可以，只要确保我们在上一节中创建的根目录就可以了。Cesium没有服务器要求;它完全是客户端。这意味着任何能够承载静态内容的web服务器也可以承载Cesium。

设置一个node.js的服务很简单，只要下面三步：

初始化Node.js，使用其默认的初始化配置。
在Cesium根目录中打开一个命令shell，并通过执行 npm install来安装来下载/安装所需的模块。这将在根目录中创建一个“node_modules”目录。
最后，通过执行在根目录下的node server.js启动web服务器。
你应该看到如下的东西

Server running

Hello (again) world!

现在,我们已经创建了一个web服务器启动并运行,我们可以启动一个浏览器,并打开http://localhost:8080/Apps/HelloWorld.html。这是我们在本教程开始时用来测试WebGL的Hello World应用程序，但现在它运行在你自己的系统上，而不是Cesium网站。如果我们打开HelloWorld.html，在编辑器中，我们将找到以下简单的应用程序。

<!DOCTYPE html>
<html lang="cn">
<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>

这是将Cesium添加到应用程序所需的四行代码:

第一步是在script标签内加入Cesium.js。这定义了Cesium对象，它包含了我们所需要的一切。
```
 <script src="../Build/Cesium/Cesium.js"></script>
```
为了使用Cesium Viewer小部件，我们需要包含它的CSS。
```
 @import url(../Build/Cesium/Widgets/widgets.css);
```
在HTML主体中，我们为viewer创建了一个div。
```
 <div id="cesiumContainer"></div>
```

最后，我们创建一个viewer实例。

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

下一步

祝贺你，你已经开始使用Cesium，并准备开始编写自己的Cesium应用程序和Web页面。根据学习者的类型，你可能有兴趣查看其他教程，其中介绍了主要的Cesium特征； Cesium Sandcastle是一个实时编码应用程序，它允许您不仅查看几十个示例，还可以查看和编辑它们的源代码，并在应用程序中运行更新的更改。最后，不管您如何学习，参考文档都包含关于API的详细信息，对每个人来说都是非常宝贵的资源。

来源：oschina

链接：https://my.oschina.net/u/3528190/blog/4487431

标签

node.js