快速入门教程基本涵盖了大多数的CesiumJS API概念，主要用于Cesium基本入门，对Cesium有全面基本的了解和使用
本教程会一步一步教会你做一个项目，主要介绍如下内容：
var viewer = new Cesium.Viewer('cesiumContainer',option);
Viewer是一个综合，包含中心的地球globe，周围的控件widget，如果只需要一个地球的话，使用可以cesiumwidget()来初始化，viewer的内部源码就是使用了cesiumwidget()创建地球，并创建一些div来生成widget控件
var viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly: true,
selectionIndicator: false,
baseLayerPicker: false
});
Cesium的数据服务器，功能很强大，但是国内一般不用
支持的 Imagery Formats:
WMS
TMS
WMTS (with time dynamic imagery)
ArcGIS
Bing Maps
Google Earth
Mapbox
Open Street Map
Cesium提供了不同的接口加载上述几种类型的服务,但都是使用ImageryProvider来加载，可通过该链接查看所有接口类型many different providers
示例如下：
// 去掉默认底图bing Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));
通过以上示例可以知道，默认的Cesium会加载一个底图，是bingMap底图，网络不太好，一般要先去掉这个默认的，加载我们自己的
示例代码如下：
// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
requestWaterMask : true, // required for water effects
requestVertexNormals : true // required for terrain lighting
});
// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;
requestVertexNormals是地形光照效果，需要打开场景光源支持，depthTestAgainstTerrain是地形遮挡效果开关，打开后地形会遮挡看不到的区域
重点标注：影像和地形都是加载scene中的globe对象上的，但是其他的entiy和3dtiles等，是加载在scene上的，和globe是同级别的，关闭globe，entiy等也会显示
Cartesian3 : 世界坐标系，坐标原点在globe球心的一个坐标系，坐标值是以米为单位，所以Cartesian3的坐标值大多是地球的半径那么大的数值。a 3D Cartesian coordinate – when used as a position it is relative to the center of the globe in meters using the Earth fixed-frame (ECEF)
Cartographic : WGS84-就是经纬度坐标系，地球的经纬度值，单位是度，如118°。a position defined by longitude, latitude (in radians) and height from the WGS84 ellipsoid surface
局部坐标系：啥叫局部坐标系呢？很简单，就是你自己在地球上找个经纬度点，把他当原点，形成一个坐标系。
看代码：
// Get the transform from local east-north-up at cartographic (0.0, 0.0) to Earth's fixed frame.
var center = Cesium.Cartesian3.fromDegrees(118.0, 30.0);
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
我们把坐标原点移动到了118.0, 30.0这个地方，x轴指向东，y轴指向北，还有northEastDownToFixedFrame等不同的方向坐标轴
HeadingPitchRoll : HPR地球视角上下左右偏移调整，参考博客相机中的HeadingPitchRoll。
Quaternion : 行话为四元数，其实就是使一个物体围绕指定的轴旋转多少角度。和旋转方法，旋转矩阵是同步改变的。（A 3D rotation represented as 4D coordinates.）
viewer.scene.Camera ,就是单纯的实现视角的各种移动缩放等
// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
destination : initialPosition,
orientation : {
heading : initialOrientation.heading,
pitch : initialOrientation.pitch,
roll : initialOrientation.roll
}
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);
可以修改cesium默认的主页按钮定位位置
// Add some camera flight animation options
homeCameraView.duration = 2.0;//飞行用时
homeCameraView.maximumHeight = 2000;//飞行过程中最大高度
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button覆盖home默认事件
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
e.cancel = true;
viewer.scene.camera.flyTo(homeCameraView);
});
坐标系转换：参考
这个在沿着路线飞行漫游的时候能用到，暂时不会，后期补充,举个使用列子吧在这
// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
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
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range
Entities相较于Primitive接口更加简单直观，是对Primitive封装
常见的Entities：
var dataSource = new Cesium.CustomDataSource('myData');
var entity = dataSource.entities.add({
position : Cesium.Cartesian3.fromDegrees(1, 2, 0),
billboard : {
image : 'image.png'
}
});
viewer.dataSources.add(dataSource);
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../SampleData/ne_10m_us_states.topojson', {
stroke: Cesium.Color.HOTPINK,
fill: Cesium.Color.PINK,
strokeWidth: 3,
markerSymbol: '?'
}));
var kmlOptions = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas,
clampToGround : true
};
// Load geocache points of interest from a KML file
// Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);
// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
// Add the new data as entities to the viewer
viewer.dataSources.add(dataSource);
// Get the array of entities
var geocacheEntities = dataSource.entities.values;
for (var i = 0; i < geocacheEntities.length; i++) {
var entity = geocacheEntities[i];
// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
// 贴地形Adjust the vertical origin so pins sit on terrain
entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
// 去掉自带的标注，不显示那么乱--Disable the labels to reduce clutter
entity.label = undefined;
// 按照缩放距离显示Add distance display condition
entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
// Compute longitude and latitude in degrees
var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
// Modify description
// Modify description
var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
'<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
'<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
'</tbody></table>';
entity.description = description;
// entity styling code here
// Set the polygon material to a random, translucent color.
entity.polygon.material = Cesium.Color.fromRandom({
red : 0.1,
maximumGreen : 0.5,
minimumBlue : 0.5,
alpha : 0.6
});
// 面贴地或者贴3dties---Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
// entity styling code here
// Generate Polygon position
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
//求一个面的中心点坐标
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// Generate labels
entity.label = {
text : entity.name,
showBackground : true,
scale : 0.6,
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
disableDepthTestDistance : 100.0
};
// Add computed orientation based on sampled positions根据位置自动调整朝向
entity.orientation = new Cesium.VelocityOrientationProperty(entity.position);
// Smooth path interpolation路径插值，就是在两点直接移动过程中，使物体的移动平滑
drone.position.setInterpolationOptions({
interpolationDegree : 3,
interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});
}
}
});
比如一个entity中很多值都是属性property类型new Cesium.Entity({position：PositionProperty,orientation:property})，这个属性值是Cesium提供的一种机制，让某个property比如positioon可以随时间自动发生变化，自动赋予不同的数值（位置）。这也就是property的作用了。
// 创建盒子
var blueBox = viewer.entities.add({
name : 'Blue box',
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.BLUE,
outline: true,
}
});
var property = new Cesium.SampledProperty(Cesium.Cartesian3);
property.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'),
new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
property.addSample(Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z'),
new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));
blueBox.box.dimensions = property;
以上代码的意思就是在两个不同的时间点分别赋予不同的位置，用SampledProperty包装成一个property，最后赋给blueBox.box.dimensions。
由此可见，Property最大的特点是和时间相互关联，在不同的时间可以动态地返回不同的属性值。而Entity则可以感知这些Property的变化，在不同的时间驱动物体进行动态展示。
Cesium宣称自己是数据驱动和time-dynamic visualization，这些可都是仰仗Property系统来实现的。
通俗讲就是比如position属性不只是能赋值一个固定的坐标，还能赋值一个有时间和位置组成的数组对象。
属性的作用是可以实现漫游飞行功能：
漫游飞行实现Interpolation
简介
开源介绍
格式介绍
The 3D Tiles Inspector
各类示例
// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(75343) }))
cesium专门提供了3D Tiles styling language
var defaultStyle = new Cesium.Cesium3DTileStyle({
color : "color('white')",
show : true
});
//按照条件
var heightStyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
["${Height} >= 200", "rgb(102, 71, 151)"],
["${Height} >= 100", "rgb(170, 162, 204)"],
["${Height} >= 50", "rgb(224, 226, 238)"],
["${Height} >= 25", "rgb(252, 230, 200)"],
["${Height} >= 10", "rgb(248, 176, 87)"],
["${Height} >= 5", "rgb(198, 106, 11)"],
["true", "rgb(127, 59, 8)"]
]
}
});
鼠标事件主要有左键，右键，滚轮键盘，鼠标移动事件，使用ScreenSpaceEventHandler来获取相应的事件
//鼠标移动事件捕捉
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
鼠标事件主要用于捕捉选择场景中添加的各种数据，选择到数据后，便可以对数据进行各种展示处理操作，选择场景中的数据的方式主要使用pick()函数，目前有一下几类：
// If the mouse is over a point of interest, change the entity billboard scale and color
var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
var pickedPrimitive = viewer.scene.pick(movement.endPosition);
//获取鼠标的经纬度位置
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
if (cartesian) {
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
entity.position = cartesian;
}
var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
// Unhighlight the previously picked entity
if (Cesium.defined(previousPickedEntity)) {
previousPickedEntity.billboard.scale = 1.0;
previousPickedEntity.billboard.color = Cesium.Color.WHITE;
}
// Highlight the currently picked entity
if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
pickedEntity.billboard.scale = 2.0;
pickedEntity.billboard.color = Cesium.Color.ORANGERED;
previousPickedEntity = pickedEntity;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//获取鼠标的经纬度位置
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
if (cartesian) {
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
entity.position = cartesian;
}
viewer.trackedEntity可以让视角一直跟着某个entity走，漫游模式。
// Create a follow camera by tracking the drone entity
function setViewMode() {
if (droneModeElement.checked) {
viewer.trackedEntity = drone;
} else {
viewer.trackedEntity = undefined;
viewer.scene.camera.flyTo(homeCameraView);
}
}