cesium.js官⽹教程之中⽂版本~~~~第⼀篇
翻译者：嬴渠梁
概述
欢迎来到cesuim社区！很⾼兴你的到来。为了发展你⾃⼰的⽹络地图应⽤成为可能，本教程将会从头到尾的介绍⼀个简单的cesium开发过程。本教程将提及⼤部分重要的cesium API，但是它并不意味着全⾯（cesium 有很多特征）。我们的⽬的是介绍⼀下基本原理和⼯具，剩下由你⾃⼰探索cesium！
我们将要创建⼀个简单的应⽤程序来可视化纽约的地貌，我们将要加载多种2d和3d数据并且创建⼏个摄像头和显⽰选项让⽤户交互，最后，我们将加载3D模型的⽆⼈机侦察地理缓存的位置，我们充分利⽤我们的三维可视化。
最后，你将了解cesium⼯作原理和如何配置cesium、加载数据集、创建有风格的⼏何图形、创建3d⽡⽚、控制照相机、并将⿏标交互添加到应⽤中。
安装
只需要⼏步就可以搭建出开发环境
1、通过访问这个⽰例来确保你的浏览器跟cesium兼容，如果不兼容，请查看
javascript是什么意思中文翻译 2、安装
4、通过cmd导航到cesium项⽬的根路径
5、执⾏ npm install
6、执⾏ npm start
应⽤⽬录
现在参观我们的应⽤⽬录吧！注意这个应⽤⽬录尽可能设计的简单，并且忽略了今天各种不同的现代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的开发⽣涯，我们⿎励你依赖下列资源：
：包含许多代码段的cesium API的完整指南
：具有⼤量代码库的实时编译环境
：cesium开发领域的详细介绍
：cesium相关问题的讨论问答资源
⽆论何时你陷⼊困境，这些资源或许会给你答案
⼯作流程
跟着这个教程学：
1、⽤你最喜欢的编辑器打开 Source/App.js ，编辑和修改内容
2、把Source/AppSkeleton.js的代码复制到Source/App.js期内容注释的版本代码
3、确定你的服务器仍然运⾏在根⽬录，如安装所述
5、按照指导，代码注释掉，保存Source/App.js，刷新页⾯，你将看到新变化
⼜卡主了？你可以通过沙塔和应⽤程序的简化版本来在线查看（不过没有UI）
（完整的代码）
（注释掉的代码）
好了现在让我们开始吧
创建⼀个观察者（查看器）
cesium应⽤的基础就是观察者，这是⼀个3d交互式的球体，他有很多功能。添加观察者到 id 为 cesiumContainer 的div⾥⾯，通过取消注释第⼀⾏。
var viewer = Cesium.viewer('cesiumContainer')
备注：你这发现上⾯这⾏代码不能显⽰出来地球仪，因为你需要有⼀个bingmap的key：我的key给⼤家⽤⼀下吧，代码如下：
//设置key值
Cesium.BingMapsApi.defaultKey = 'SHHFsraTruJW1WlBZo4W~Voo0XWCy1Zt2-2iAVLxvFQ~Ai_3AucRsH-FTKgfBT34iPCl128DNCGslmWLM0Hplg9UgMZoftwZFkKbhHu_RAo8'
var viewer = new Cesium.Viewer('cesiumContainer');
这⼀⾏中有很多事情发⽣，你将会看到像这样的⼀个地球仪：
默认情况下场景处理⿏标和输⼊事件，现在可以尝试⽤默认的相机来控制地球仪吧：
1、⿏标单击左键并拖动⿏标，将相机移到地球表⾯
2、⿏标右键单击并拖动⿏标，放⼤和缩⼩相机
3、⿏标中间轮滚动，也能放⼤和缩⼩相机
4、⿏标中间轮点击和拖动，旋转相机周围的点在地球表⾯。
除了地球仪之外，Viewer还附带⼀些默认的有⽤的⼩部件，在上⾯的图⽚中标出。
图⽚数字1、（地图编码器）：⼀个位置搜索⼯具，⽤照相飞机查询位置。默认使⽤bingMap地图数据
图⽚数字2、（主页按钮）：返回默认视图
图⽚数字3、（场景模式选择器）：在3D、2D、哥伦布图、CV模式之间来回切换
图⽚数字4、（基础层显⽰器）：选择图像和地形显⽰在地球上
图⽚数字5、（导航帮助按钮）：显⽰默认摄像头的控价
图⽚数字6、（动画）：显⽰视图的播放数度
图⽚数字7、（时间轴）：指⽰当前时间，并允许⽤户使⽤洗刷器跳转到特定时间
图⽚数字8、（显⽰器）：数据分配点，⼏乎总是⽤到
图⽚数字9、（全屏）：全屏
我们可以配置我们的查看器来包含或排除这些功能，⽽更多的是通过在创建选项对象时作为参数。对于这个应⽤程序，删除第⼀⾏并通过取消注释接下来的⼏⾏来配置新的
查看器：
var viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly: true, //只使⽤3D（图⽚数字3消失）
selectionIndicator: false, //选择指⽰符
baseLayerPicker: false //基础层拾取器（图⽚数字4消失）
});
这将创建⼀个没有选择指⽰器，基础层选取器或场景模式选择器⼩部件的查看器，因为这些对于我们的应⽤程序来说是不必要的。有关完整的Viewer选项，请参阅。
添加图像
cesium应⽤程序下⼀个关键元素就是添加图像，在不同分辨率下我们将图像集平铺到虚拟球上，为了提供最佳性能，Cesium只请求和渲染在当前视图中可见并且分辨率
（也称为缩放⽐例）适合摄像机与地球表⾯的距离以及地球仪的的图像块。
为了更直观地了解图像如何⼯作，请查看。
cesium提供了很多⼯具来处理图像层，如颜⾊调整和图层混合。⼀些代码⽰例：
1、; 添加基本图像
2、修改图像颜⾊
3、; 操作和订购图层
4、; 分割图层
Cesium提供了许多不同提供的图像⽀持。
⽀持的图像格式如下：
利⽤具有地理空间位置信息的数据制作地图。其中将地图定义为地理数据可视的表现。这个规范定义了三个操作：
(1)GetCapabitities 返回服务级元数据，它是对服务信息内容和要求参数的⼀种描述；
(2)GetMap 返回⼀个地图影像，其地理空间参考和⼤⼩参数是明确定义了的；
(3) GetFeatureInfo（可选）返回显⽰在地图上的某些特殊要素的信息。
(with time dynamic imagery)
Single tile 单⼀⽡⽚
默认情况下，Cesium将Bing地图⽤于图像。要⼩⼼，不同的数据提供者具有不同的归因要求 - 确保您有权使⽤来⾃特定提供者的数据，并将其归⼊信⽤容器（如果适
⽤）。与查看器⼀起打包的图像主要⽤于演⽰⽬的。为了在我们的应⽤程序中使⽤Bing图像集，我们需要获取我们⾃⼰的。⽤这样的⼀⾏设置Bing键（在我们的应⽤程序的顶
部，在创建查看器之前）：
Cesium.BingMapsApi.defaultKey = 'AsarFiDvISunWhi137V7l5Bu80baB73npU98oTyjqKOb7NbrkiuBPZfDxgXTrGtQ'; // For use in this application only. Do not reuse!
同样，不同的图像提供商对使⽤的要求也会有所不同。现在我们有权使⽤这个图像集，我们实际上可以添加图像层。⾸先，我们创建⼀个ImageryProvider，传⼊⼀个数据
url和⼀些配置选项，然后将ImageryProvider添加到viewer.imageryLayers。
// Add Bing imagery
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url : 'dev.virtualearth',
mapStyle: Cesium.BingMapsStyle.AERIAL // Can also use Cesium.BingMapsStyle.ROADS 参数如下：AERIAL_WITH_LABELS 、ROAD 、CANVAS_DARK 、CANVAS_LIGHT 、CANVAS_GRAY 、ORDNANCE_SURVEY 、COLLINS_BAR }));
随着上⾯的代码添加，我们的应⽤程序应该看起来像这样，当你放⼤：
这实际上与默认图像样式相同，但可以随意使⽤ BingMapsStyle 来查看差异。
有关图像的更多信息，请参阅我们的。
添加地形
cesium⽀持对海洋，湖泊和河流的全球⾼分辨率地形和⽔影响进⾏流式传输和可视化。与2D地图相⽐，⼭峰，⼭⾕和其他地形特征确实显⽰出3D地球的优势。像图像⼀样，cesium引擎将从服务器传输地形数据，只根据当前摄像机的位置请求和渲染⽡⽚。
以下是地形数据集和配置选项的⼀些演⽰：
: ⾼分辨率的北极地形
: ⾼分辨率宾⼣法尼亚地形
: ⼀些地形配置选项和格式
: 使地形⾼程差异更加显着
⽀持的地形格式：
Our own format 我们⾃⼰量化的⽹格格式
Heightmap ⾼度图
Google Earth Enterprise ⾕歌地球企业版
为了添加地形数据，我们创建⼀个 ,，指定⼀个数据url和⼀些配置选项，然后将这个提供者添加为。
url : 'assets.agi/stk-terrain/world',
requestWaterMask : true, // required for water effects
requestVertexNormals : true// required for terrain lighting
});
requestWaterMask和requestVertexNormals是配置选项，告诉Cesium为⽔和灯光效果请求额外的数据。默认情况下，这些设置为false。
最后，现在我们已经有地形了，我们只需要再多⼀⾏来确保地形背后的物体被正确地遮挡。只有最前⾯的对象才可见。
我们现在有地形和⽣⽓的⽔。纽约是相当平坦的，所以随时探索，以便看到新的地形在⾏动。举⼀个特别明显的例⼦，您可以导航到更加崎岖的地区，如⼤峡⾕或旧⾦⼭。
配置场景
现在只需稍微安装⼀下，即可在适当的位置和时间启动查看器。这涉及与viewer.scene交互，这是查看器中所有图形元素的容器。
⾸先，我们可以配置我们的场景，以根据太阳的位置使⽤此线来选择性地启⽤照明。
// Enable lighting based on sun/moon positions (根据太阳/⽉亮位置启⽤照明)
viewer.ableLighting = true;
这将使我们的场景中的照明随着时间的变化⽽变化，这样当太阳不能看的时候，你可以看到地球的⼀部分变暗。
接下来，在我们开始设置初始视图之前，让我们回顾⼀下⼏个基本的Cesium类型：
: a 3D Cartesian point – when used as a position it is relative to the center of the globe in meters using the Earth fixed-frame (ECR)
三维笛卡尔点 - 当⽤作位置时，它使⽤地球固定框架（ECR）以⽶为单位，相对于地球的中⼼
: a position defined by latitude/longitude (in radians) and height off the globe’s surface
由纬度/经度（弧度）和地球表⾯的⾼度定义的位置
: A rotation (in radians) about the local axes in the East-North-Up frame. Heading is the rotation about the negative z axis. Pitch is the rotation about the negative y axis.
Roll is the rotation about the positive x axis.
帧中围绕本地轴的旋转（以弧度表⽰）。标题是围绕负z轴的旋转。间距是围绕负y轴的旋转。滚动是围绕正x轴的旋转。
: A 3D rotation represented as 4D coordinates.
3D旋转表⽰为4D坐标。
这些是在场景中定位和定位铯物体所需的基本类型，并且有许多有⽤的转换⽅法。
现在让我们把我们的场景放在我们的数据所在的纽约市。
相机控制
是的⼀个属性，并控制当前可见的内容。我们可以通过直接设置摄像机的位置和⽅向来控制摄像机，也可以使⽤Cesium摄像机API来设置摄像机的位置和⽅向。
⼀些最常⽤的⽅法是：
: set camera at specific position and orientation immediately
⽴即将相机置于特定的位置和⽅向
: move camera forward along the view vector
沿相机向前移动相机
: move camera backwards along the view vector
沿相机向后移动相机
: animates movement from current position to a new position
将动作从当前位置移动到新的位置
: orient and position the camera to look at target point with given offset
定位和定位相机以给定偏移量来查看⽬标点
: move the camera in any direction
向任何⽅向移动相机
:
rotate the camera about any axis
围绕任何轴旋转相机
要了解API可以做什么，请查看这些相机演⽰：
相机API演⽰
定制相机控制演⽰
现在让我们通过将相机移动到纽约来尝试其中的⼀种⽅法。使⽤camera.setView（）设置初始视图，使⽤Cartesian3和HeadingPitchRoll作为位置和⽅向：
// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.0827********);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
destination : initialPosition,
orientation : {
heading : initialOrientation.heading,
pitch : initialOrientation.pitch,
roll : ll
}
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);
摄像机现在定位和定位，以低头曼哈顿，我们的视图参数保存在⼀个对象，我们可以传递给其他相机的⽅法。
实际上，我们可以使⽤这个相同的视图来更新按下主页按钮的效果。⽽不是让我们从远处返回到地球的默认视图，我们可以覆盖按钮，使我们能够看到曼哈顿的初始视图。我们可以通过添加更多选项来调整动画，然后添加⼀个取消默认航班的事件侦听器，并调⽤flyTo（）我们的新主视图：
// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
// Override the default home button
viewer.homeButton.viewModelmand.beforeExecute.addEventListener(function (e) {
e.cancel = true;
viewer.scene.camera.flyTo(homeCameraView);
});
有关基本相机控件的更多信息，请查看我们的。
时钟控制
接下来，我们可以配置观看者时钟和时间线来控制场景中的时间流逝。
这⾥是的⾏动。
在特定时间⼯作时，Cesium使⽤JulianDate类型，该类型存储⾃公元前4712年1⽉1⽇（公元前4713年）中午以来的天数。为了提⾼精确度，该类将⽇期的整数部分和⽇期的秒部分存储在单独的组件中，为了算术安全并表⽰闰秒，⽇期总是存储在国际原⼦时间标准中。
以下是我们如何设置场景时间选项的⽰例：
// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // default
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
To(viewer.clock.startTime, viewer.clock.stopTime); // set visible range
这将设置场景动画的速率，开始和结束时间，并告诉时钟在到达结束时间时循环。它还将时间线设置为适当的时间范围。看看这个时钟的例⼦代码来试验时钟设置。
这就是我们最初的场景配置！现在，当您运⾏应⽤程序时，您应该看到以下内容：
发表评论