本教程将获得所有技能水平的开发人员和他们的第一个铯应用程序运行。

验证Cesium在您的Web浏览器中工作的最简单的方法是单击此处运行Hello World示例 (打开一个新窗口)。如果你看到像下面的图像,恭喜你的系统可以运行铯,你可以安全地跳到下一部分; 否则,继续阅读。

Cesium是基于几种新的HTML5技术构建的,其中最重要的是WebGL。即使这些新标准很快被广泛采用,一些浏览器和系统需要更新以支持它们。如果示例应用程序不适合您,请尝试以下几种方法。

  1. 更新您的网络浏览器。大多数Cesium团队使用Google Chrome,但Firefox,Internet Explorer 11和Opera也可以使用。如果您已经在使用上述其中一种浏览器,请确保更新到最新版本。
  2. 更新您的显卡驱动程序以更好地支持3D。如果您知道您的视频卡类型,您可以检查供应商网站的更新。三个最受欢迎的是:NvidiaAMD英特尔
  3. 如果您仍遇到问题,请尝试访问http://get.webgl.org/,其中提供了其他问题排查建议。您也可以在Cesium论坛上寻求帮助。

选择编辑器或IDE

如果你已经是一个经验丰富的开发人员,你很可能有一个最喜欢的编辑器或开发环境; 例如,大多数铯团队使用Eclipse。如果你刚刚开始,一个伟大的免费和开源的编辑器是Notepad ++,你可以从他们的网站下载。最终任何文本编辑器都会做,所以去与你最舒适的。

下载铯释放

假设你还没有这样做,点击这个按钮抓住最新的铯释放: Cesium-1.30.zip

下载后,将zip文件解压到您选择的新目录中,我将在整个教程中将此文件称为Cesium root目录。内容应该看起来像下面。

它可能是诱人的双击index.html,但我们只会有失望的欢迎。为了使应用程序实际工作,它需要在Web服务器中运行。

为了运行Cesium应用程序,我们需要一个本地Web服务器来托管我们的文件。我们将使用Node.js来完成这个和其他教程。如果你已经有一个你想要使用的Web服务器,这也很好,只要确保托管我们在上一节中创建的根目录。铯没有服务器要求; 它完全是客户端。这意味着任何可以托管静态内容的Web服务器也可以托管Cesium。

使用Node.js设置Web服务器很容易,只需要3个步骤。1.从其网站安装Node.js ,可以使用默认安装设置。2.在Cesium根目录中打开命令shell,然后通过执行下载/安装所需的模块npm install。这将在根目录中创建一个“node_modules”目录。3.最后,通过node server.js在根目录中执行启动Web服务器。你应该看到类似下面的东西

你好(再次)世界!

现在我们已经启动并运行了一个Web服务器,我们可以启动浏览器并导航到http:// localhost:8080 / Apps / HelloWorld.html。这是我们在教程开始时用来测试WebGL的Hello World应用程序,但现在它运行在您自己的系统而不是Cesium网站上。如果我们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>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
 

这些是需要添加铯到应用程序的四行:

  1. 第一步是Cesium.js在脚本标记中包含。这定义了Cesium对象,其中包含我们需要的一切。

     <script src="../Build/Cesium/Cesium.js"></script>
  2. 为了使用Cesium Viewer小部件,我们需要包括它的CSS。

     @import url(../Build/Cesium/Widgets/widgets.css);
  3. 在HTML体中,我们创建一个div,供查看器生活。

     <div id="cesiumContainer"></div>
  4. 最后,我们创建一个viewer的实例。

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

恭喜,您已经启动并运行Cesium并准备开始编写自己的铯应用程序和网页。根据学习者的类型,您可能有兴趣查看其他教程,介绍主要的铯功能。如果你是一个tinkerer,那么Cesium Sandcastle是一个现场编码应用程序,它将允许你不仅查看几十个示例,而且查看和编辑它们的源代码,从应用程序中更新更改。最后,无论您如何学习,参考文档包含API的详细信息,是每个人的宝贵资源。

cesium入门1的更多相关文章

  1. cesium 入门开发系列地图鹰眼功能(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现 ...

  2. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  3. cesium入门示例-测量工具

    作为cesium入门示例级别的最后一篇,参考cesium-长度测量和面积测量实现测量工具封装,修改了其中的距离测量函数,计算贴地距离,并对事件内部处理做了调整.包括贴地距离测量.面积测量.结果清除. ...

  4. cesium入门示例-矢量化单体分类

    实现楼层的分层选择和属性信息展示,该功能基于大雁塔倾斜数据实现单体化分类显示. 数据准备: 1.大雁塔倾斜数据,已转换为3dTiles,参考cesium入门示例-3dTiles加载的第2节osgb数据 ...

  5. Cesium入门13 - Extras - 附加内容

    Cesium入门13 - Extras - 附加内容 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 剩下的代码 ...

  6. Cesium入门12 - Camera Modes - 相机模式

    Cesium入门12 - Camera Modes - 相机模式 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ ...

  7. Cesium入门11 - Interactivity - 交互性

    Cesium入门11 - Interactivity - 交互性 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ ...

  8. Cesium入门9 - Loading and Styling Entities - 加载和样式化实体

    Cesium入门9 - Loading and Styling Entities - 加载和样式化实体 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://c ...

  9. Cesium入门10 - 3D Tiles

    Cesium入门10 - 3D Tiles Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 我们团队有时把Ces ...

  10. Cesium入门8 - Configuring the Scene - 配置视窗

    Cesium入门8 - Configuring the Scene - 配置视窗 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coini ...

随机推荐

  1. Executor , ExecutorService 和 Executors

    三者的主要区别和关系如下: Executor 和 ExecutorService 这两个接口主要的区别是:ExecutorService 接口继承了 Executor 接口,是 Executor 的子 ...

  2. static_cast、dynamic_cast、reinterpret_cast、和const_cast

    关于强制类型转换的问题,很多书都讨论过,写的最详细的是C++ 之父的<C++ 的设计和演化>.最好的解决方法就是不要使用C风格的强制类型转换,而是使用标准C++的类型转换符:static_ ...

  3. taglib的uri问题

    最开始我在代码中看到这样的代码(运行正常): <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/fu ...

  4. bnuoj16491

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=16491 题意:有t组测试数据,每组测试数据第一行为n,m,接下来有n种跑法,m为最大的能力,每一种跑 ...

  5. C++基础学习-20120516

    1.一下是使用strcpy_s与strcpy的安全性比较 char szBuf[2] = {0}; strcpy_s(szBuf, 2, "12131");  //新的CRT函数  ...

  6. golang socket 实现分析(一)

    socket:tcp/udp.ip构成了网络通信的基石,tcp/ip是面向连接的通信协议 要求建立连接时进行3次握手确保连接已被建立,关闭连接时需要4次通信来保证客户端和,服务端都已经关闭 在通信过程 ...

  7. RabbitMQ(二):mandatory标志的作用

    本文转自:http://m.blog.csdn.net/article/details?id=54311277 在生产者通过channel的basicPublish方法发布消息时,通常有几个参数需要设 ...

  8. wampserver 手动启用停用命令

    1.定位到安装目录 在cmd中定位到wampserver的安装目录,如:D:\wamp\bin\apache\Apache2.4.4\bin 2.执行命令 启动apache命令httpd -k sta ...

  9. Ubuntu下SSH安装及提高SSH登陆认证速度的办法

    Ubuntu 下安装 OpenSSH Server 是无比轻松的一件事情,需要的命令只有一条: sudo apt-get install openssh-server (查看返回的结果,如果没有出错, ...

  10. 线程安全,有状态,无状态的对象<转>

    进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位.线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.另外 ...