翻译地址:https://cesiumjs.org/tutorials/Cesium-Workshop/
翻译者:嬴渠梁
概述
欢迎来到cesuim社区!很高兴你的到来。为了发展你自己的网络地图应用成为可能,本教程将会从头到尾的介绍一个简单的cesium开发过程。本教程将提及大部分重要的cesium API,但是它并不意味着全面(cesium 有很多特征)。我们的目的是介绍一下基本原理和工具,剩下由你自己探索cesium!
我们将要创建一个简单的应用程序来可视化纽约的地貌,我们将要加载多种2d和3d数据并且创建几个摄像头和显示选项让用户交互,最后,我们将加载3D模型的无人机侦察地理缓存的位置,我们充分利用我们的三维可视化。
最后,你将了解cesium工作原理和如何配置cesium、加载数据集、创建有风格的几何图形、创建3d瓦片、控制照相机、并将鼠标交互添加到应用中。
安装
只需要几步就可以搭建出开发环境
1、通过访问helloworld这个示例来确保你的浏览器跟cesium兼容,如果不兼容,请查看故障
2、安装 node.js
3、提取代码https://github.com/AnalyticalGraphicsInc/cesium-workshop,克隆或下载zip都行
4、通过cmd导航到cesium项目的根路径
5、执行 npm install
6、执行 npm start
控制台就会显示Cesium development server running locally. Connect to http://localhost:8080/,不要关闭控制台
然后,通过浏览器访问 http://localhost:8080,你应该看到项目启动和运行,卡住了?入门教程更深入的介绍了cesium的设置。
应用目录
现在参观我们的应用目录吧!注意这个应用目录尽可能设计的简单,并且忽略了今天各种不同的现代js框架,但是一旦你掌握了cesium,就可以自由使用它!
source: 我们的应用代码和数据
ThirdParty: 外部库,只是cesium库
LICENSE.md:项目使用的条款或协议
index.html: 项目主页
server.js: 服务启动文件
现在看一下index.html,里面有一个div和几个input,观察一下cesium只是一个div,跟其他div没什么两样
首先,在head标签里引入cesium.js库,它定义了cesium对象,该对象包含了cesium所有的库
<script src="ThirdParty/Cesium/Cesium.js"></script>
cesium附带了一组需要此CSS的小部件。
<style>@import url(ThirdParty/Cesium/Widgets/widgets.css);</style>
在body标签里面创建一个div存放cesium小部件。
<div id="cesiumContainer"></div>
最后,我们在body最底下创建script标签引入App.js
<script src="Source/App.js"></script>
就是这样,剩下的html用来收集用户数据,我们一会用到
开发资源
对于本概要和贯穿剩下的cesium的开发生涯,我们鼓励你依赖下列资源:
referenceDocument(参考文档):包含许多代码段的cesium API的完整指南
SandCastle(沙塔):具有大量代码库的实时编译环境