翻译 Cesium入门教程(一)------环境配置 Hello World

转载请注明出处 http://my.oschina.net/u/149294/blog/202433

本人建了一个QQ群：115883691，欢迎大家一起来讨论Cesium相关技术

首先确保你的浏览器支持Cesium

判断你的浏览器是否支持Cesium最简单的办法就是看你是否能成功的运行cesium的helloworld例子（点这里（要翻墙才行）），假如你看到如下的图像，祝贺你，你可以开始下边的步骤了（其实不翻墙你是看不到了，不过也没关系，只要你用的是最新版的firefox或者google chrome就没问题）。

Cesium用到了很多HTML5的技术，其中最重要的是WebGL。尽管这些标准正在被越来越广泛的应用，但是很多的浏览器和系统还是需要更新至新版版才能支持他们。假如上面的例子不能工作，这儿还有一些方法可以试试。

更新你的浏览器，Cesium团队大多使用Google Chrome，但是firefox，Safari和其他的一些浏览器也能很好的工作，假如你使用的是上面这些浏览器中的一种，那么确保你更新到了最新版。不幸的是当前版本的IE还不支持WebGL（貌似最新版支持了，不过没试过）。
升级你的显卡驱动。
假如还是不行，去http://get.webgl.org/看看，它提供了一些解决问题的建议。最后你可以到论坛寻求帮助。

选择编辑器或IDE

假如你是一个老手，你可能有一个你自己喜欢的编辑器或者开发环境。例如，大多数的Cesium团队成员使用Eclipse。假如你一个新手，你可以尝试这款开源免费的编辑器Notepad++，可以在这儿下载notepad-plus-plus。其实随便哪个文本编辑器都可以，你用着爽就行。

下载Cesium

下载release版本这里（需要翻墙）

下载完成后解压到指定目录，本教程将他作为root，里边的内容看起来像下边这样。

假如你来就点HelloWorld.html,对不起你会很失望的。要想让他工作，你得有一个web服务器。

搭建服务器

想要运行Cesium程序，我们需要一个本地的服务器来host我们的文件，接下来我们将要使用Node.js来完成我们的教程（我自己使用的是IIS）。假如你已经有一个了那你用就是了，没关系的，只要记住host的是那个我们上面创建的root就行。

搭建Node.js很简单，只要3步。

下载并安装Node.js，一切默认配置就行。
在root目录打开命令行，通过npm install connect安装connect package。这样将会在我们的root目录中创建一个'node_modules'目录。
最后，在root目录中通过执行 node server.js 开启服务器。

再来Hello一次world

现在我们的服务器已经跑起来了，打开浏览器然后输入http://localhost:8080/HelloWorld.html回车。跟我们刚开始的时候用来测试WebGL的是不是很像，只是说现在它是运行在我们自己的服务器上面，而不是Cesium的。假如你用文本编辑器打开helloworld.html，你会看到下面的代码。

<!DOCTYPE html> 
<html>   
<head>     
    <title>Hello World!</title>     
    <script src="Cesium/Cesium.js"></script>     
    <style>       
        @import url(Cesium/Widgets/CesiumWidget/CesiumWidget.css);       
        #cesiumContainer {         
            position: absolute;         
            top: 0;         
            left: 0;         
            height: 100%;         
            width: 100%;         
            margin: 0;         
            overflow: hidden;         
            padding: 0;         
            font-family: sans-serif;       
        }       
        body {         
            padding: 0;         
            margin: 0;         
            overflow: hidden;       
        }     
    </style>   
</head> 
<body>   
    <div id="cesiumContainer"></div>   
    <script>     
        var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');   
    </script> 
</body> 
</html>

尽管这个程序看起来很小，麻雀虽小五脏俱全。现在我们就来一步步的讲解这最重要的4步。

第一步就是引入Cesium.js，他里面定义的Cesium对象有我们想要的一切

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

第二步，为了使用Cesium widget，我们需要引入CesiumWidget.css

@import url(Cesium/Widgets/CesiumWidget/CesiumWidget.css);

第三步，在body中，创建一个div来给我们的Cesium widget使用

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

第四步，创建一个widget的实例，收工。

var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');

接下来该干什么

恭喜恭喜，你现在已经学会了怎么来运行你的Cesium，可以开始去写你自己的Cesium程序或者网页了。不知道你对其他的教程是否感兴趣（tutorials），它们介绍了Cesium的主要功能。假如你喜欢折腾，这还有一个叫Cesium Sandcastle的所见即所得的程序，它上面有很多例子，你可以一边看一边改它的代码，然后马上就能看到运行结果。最后不管你懂没懂，这还有个叫Documentation的东西，里头就是些API文档。

转载请注明出处 http://my.oschina.net/u/149294/blog/202433

来源：oschina

链接：https://my.oschina.net/u/149294/blog/202433

标签

cesium

WebGL

gis

webgis