您的位置：首页 > 其它

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

2014-02-23 00:00 597 查看
摘要: Cesium官方tutorial的翻译

转载请注明出处 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Cesium webgl gis webgis 3d
相关文章推荐
新的分享
章节导航