乐趣区

Cesium入门2-Cesium环境搭建及第一个示例程序

jiezi

验证浏览器

Cesium 需要浏览器支持 WebGL，可以通过 CesiumJS 官网提供的一个 HelloWorld 例子来测试自己的浏览器是否支持 Cesium。（推荐使用 Chrome）
测试地址：
https://cesiumjs.org/Cesium/A…

选择 IDE

官网中写到：

If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

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

我个人之前开发 PHP 较多，所以我使用的是 PHPStorm，其实我不推荐 Eclipse，我比较推荐和 Idea 一母同胞的 WebStorm。考虑到工程和文件夹的管理，我也不推荐 Notepad++，轻量级的 IDE 我比较推荐 Sublime Text.

下载 Cesium 源代码

最新的 release 版本代码下载地址：
https://cesiumjs.org/tutorial…

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

直接点击 index.html 是无效的，需要放入 Web Server 容器中，才能运行起来。

Server 端

Cesium 是纯前端的代码，官方给出的源代码中，配套了 nodejs 的 server 端，以及可以通过 nodejs 进行安装部署。实际上可以将 Cesium 部署进入 tomcat（geoserver）、apache、nginx 等服务器中。

官网推荐的是 nodejs

  1. 从官网中下载 Node.js(https://nodejs.org/en/), 实际上 nodejs 有一些参数可是配置，使用默认的参数即可。.
  2. 在 Cesium 所在的文件夹目录，打开 cmd 或者 bash 敲入命令 
npm install

下载依赖的 npm 模块，比如 express 等。如果成功，会在 Cesium 文件夹中床架‘node_modules’文件夹。

  1. 最后在 cmd 或者 bash 中执行 

    node server.js

    或者 

    npm start
  2. 成功之后能看到如下的截图

控制台会显示：

Cesium development server running locally.  Connect to http://localhost:8080

备注 ：不能关闭控制台，保持一直运行状态。打开浏览器，输入 http://localhost:8080 即可访问 Cesium.

如果你不想用 nodejs

Cesium 是一个开源项目，GitHub 上的下载地址为：https://github.com/Analytical…
最简单的安装方式，就是普通的 JS 文件加载，只需要从 Github 中下载其 js 代码，放到自己的项目中，在 html 页面中引用即可。如下：

新建一个 helloworld.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello 3D Earth</title>
    <script src="CesiumUnminified/Cesium.js"></script>
    <style>
        @import url(CesiumUnminified/Widgets/widgets.css);
        html, body, #cesiumContainer {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script src="app.js"></script>
</body>
</html>

新建一个 app.js

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

其中 cesiumContainer 为 html 中的地图显示 div 的 id。就是这么简单，浏览器打开上述 html 页面，便可看到一个三维地球。底图为微软影像只是加载到了三维地球上，包含放大、缩小、平移等基本在线地图功能，同时还包含了时间轴等与时间有关的控件，这是 Cesium 的一个特色，其地图、对象以及场景等能与时间相关联。

本地的 Hello World 程序

现在本地的 node 服务已经运行起来，打开浏览器，输入：http://localhost:8080/Apps/HelloWorld.html.
能看到和官方一模一样的 hello wolrd 三维数字地球。

hello World 代码分析

官网 hello world 代码如下：

<!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>

以下四个步骤将 Cesium 加入到 html 中：

  1. 引入 Cesium.js，该 javascript 定义了 Cesium object
<script src="../Build/Cesium/Cesium.js"></script>
  1. 导入 Cesium Viewer widget 的样式 
@import url(../Build/Cesium/Widgets/widgets.css);
  1. cesium view 存在于该 div 中 
<div id="cesiumContainer"></div>
  1. 最终创建 cesium viewer
var viewer = new Cesium.Viewer('cesiumContainer');

Cesium 中文网交流 QQ 群：807482793

本文由 admin 创作，采用 知识共享署名 3.0 中国大陆许可协议 进行许可。
可自由转载、引用，但需署名作者且注明文章出处。

退出移动版