cesium-文档翻译-1. Cesium Workshop

Cesium Workshop

概述

欢迎来到Cesium社区!很高兴你能加入我们。以便你可以开发自己的网络地图应用程序,这个教程将会领略整个Cesium示例应用从头到尾的开发过程。这个教程将会涉及到很多重要的Cesium JS API的部分,但这并不意味着这些事全部(CesiumJs包含着很多的功能和特性!)。我们的目标是介绍cesium的基础知识和工具,以及将带你探索Cesium的其他功能。

我们将创建一个位于纽约的可视化地理藏宝样例的简单应用,我们将加载和设计多种类型的2D和3D数据,并创建多个相机和用于用户交互设置的显示选项。最后,作为高科技的地理藏宝者们,我们将加载一个3D的无人机模型来侦查地理宝藏的位置并充分的利用我们的3D可视化模型。

在这教程的结尾,你将会对Cesium的功能进行概述,这些包括配置Cesium视图,加载数据集,创建和设计几何体,使用3D瓦片图,控制摄像机,以及添加针对应用的鼠标交互。



我们的可交互可视化地理藏宝示例应用

安装

我们开发前需要进行一些安装步骤

  1. 通过访问Cesium视图确认你的系统兼容Cesium,如果没有出现地球,请查看故障分析页面
  2. 安装Node.js
  3. 下载学习示例代码,检出项目或者下载压缩包并解压。
  4. 打开你的终端控制台,切换到cesium-workshop项目的根目录
  5. 执行npm install
  6. 执行npm start

终端应该会显示“Cesium development server running locally. Connect to http://localhost:8080/。不要关闭终端!我们需要这个进程一直运行。

下一步,在你的浏览器中打开localhost:8080这个地址。你应该会看到我们的示例应用已经可以正常运行了,很难么?入门教程将带你更深入的了解Cesium的设置。

应用目录结构

现在我们来参观一下应用的目录!需要注意的是这个应用被设计的将可能的简单并仅仅只包含了CesiumJS的类库。Cesium可以兼容任何现代的JavaScript框架,所以请随意尝试!

  • Source: 我们的应用代码和数据
  • ThirdParty: 外部类库,现在只有CesiumJs的类库
  • LICENSE.md: 应用使用协议
  • index.html: 我们的主页面
  • server.js: 我们的应用将会从这里运行

现在让我们来看看index.html文件,这为我们的Cesium组件和一些基础的数据元素创建了一个div。观察到的是Cesium组件仅仅是一个普通的div元素,可以像任何其他div一样进行交互和设计。

这里有几处重要的地方需要设置。

首先我们需要在HTML头部使用script标签将Cesium引入。这定义了包含整个CesiumJS库的Cesium对象。

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

Cesium附带的一些组件需要引用CSS文件

1
<style>@import url(ThirdParty/Cesium/Widgets/widgets.css);</style>

在这HTML的body中我们创建一个div用来作为Cesium的视图组件

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

最后,我们在另一个位于HTML的body结尾位置的script标签中添加JavaScript应用脚本引用

1
<script src="Source/App.js"></script>

就是这样!该文件中HTML的剩余部分是用于采集用户输入,我们稍后将会介绍。