Cesium入门-3-官方完整实例
实例核心代码
//资源访问令牌 Cesium token
Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c'
//创建Cesium 场景
var viewer=new Cesium.Viewer('cesiumContainer',{
scene3DOnly:true,
selectionIndicator:true,
baseLayerPicker:true,
timeline:true,//时间轴
animation:true,//动画轴
});
//增加地图图片资源提供者（CesiumIon） Cesium官方
viewer.imageryLayers.remove(0); //图片层级管理 移除默认的基础层级提供者
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({assetId:3954}));
//设置地形
viewer.terrainProvider=Cesium.createWorldTerrain({
requestWaterMask:true,//水渲染需求
requestVertexNormals:true//顶点法线渲染需求
});
viewer.scene.globe.depthTestAgainstTerrain=true;//深度显示（用于湖泊河流 水深对周围景观的影响）
viewer.scene.globe.enableLighting=true;//全局日照（受太阳，月亮的位置而影响光照信息）
//创建初始化摄像机视图
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 //滚转角
}
};
viewer.scene.camera.setView(homeCameraView);
//飞行时，相机的动画属性设置
homeCameraView.dutaion=2.0;
homeCameraView.maximumHeight=2000;
homeCameraView.pitchAdjustHeight=2000;
homeCameraView.endTransform=Cesium.Matrix4.IDENTITY;
// //覆盖初始相机视图
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e){
e.canvel=true;
viewer.scene.camera.flyTo(homeCameraView) //貌似没效果 -.-
})
//设置时间轴
viewer.clock.shouldAnimate=true;//右下角圆盘指针控制的时钟动画
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z"); //开始时间 使用iso8601国际标准
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z"); //停止时间
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");//当前时间
viewer.clock.multiple=2; //时间流逝 速率
viewer.clock.clockStep=Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER;//时钟的 步长
viewer.clock.clockRange=Cesium.ClockRange.LOOP_STOP;//循环
viewer.timeline.zoomTo(viewer.clock.startTime,viewer.clock.stopTime);//设置时间轴可见趋近
/**加载KML数据--添加地理标记 从KML文件中获取数据 由Cesium.KmlDataSource数据加载器加载--**/
var kmlOptions = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas,
clampToGround : true
};
// 从KML 文件中加载地理标记点 geocache
//KML全称：Keyhole Markup Language，是基于XML（eXtensible Markup Language,可扩展标记语言）语法标准的一种标记语言（markup language）,由Google（谷歌）旗下的Keyhole公司发展并维护，用来表达地理标记
var geocachePromise = Cesium.KmlDataSource.load('https://gist.githubusercontent.com/rahwang/bf8aa3a46da5197a4c3445c5f5309613/raw/04e17770dd552fd2694e2597986fd480b18b5014/sampleGeocacheLocations.kml', kmlOptions);
// 从geocachePromise中解析标记点 并转化为 Cesium中的 实体对象（entity)
geocachePromise.then(function(dataSource) {
//数据源添加到实际场景viewer 中的dataSources数据源中
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];
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 = "KML billboard 兴趣点"+i;
// Add distance display condition 满足的距离条件时，显示兴趣点
entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
// Compute latitude and longitude in degrees 位置和角度
var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
//转化成经纬度
var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
// Modify description 兴趣点属性 描述
var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>';
description += '<tr><th>' + "Latitude" + '</th><td>' + latitude + '</td></tr>';
description += '<tr><th>' + "Longitude" + '</th><td>' + longitude + '</td></tr>';
description += '</tbody></table>';
entity.description = description;
}
}
});
/**加载GeoJson数据 ，添加邻近区图形 从GeoJson文件中获取数据 由GeoJsonDataSource数据加载器加载**/
var geojsonOptions = {
clampToGround : true
};
// 从Geojson文件中获取 多边形 边界信息数据
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('https://gist.githubusercontent.com/rahwang/2c421916bb955ca722a4dbc8ab079c76/raw/ae8a1c5680fbd2fc6940dd3a8f941ad397bdc085/sampleNeighborhoods.geojson', geojsonOptions);
//从neighborhoodsPromise 数据源转化为Cesium中的数据实体entity
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
// 数据源添加到实际场景viewer 中的dataSources数据源中
viewer.dataSources.add(dataSource);
neighborhoods = dataSource.entities;
// 获取总的数据实体 数组
var neighborhoodEntities = dataSource.entities.values;
for (var i = 0; i < neighborhoodEntities.length; i++) {
var entity = neighborhoodEntities[i];
if (Cesium.defined(entity.polygon)) {
// Use kml neighborhood value as entity name
entity.name = entity.properties.neighborhood;
// 设置多边形 的材质 和透明
entity.polygon.material = Cesium.Color.fromRandom({
red : 0.1,
maximumGreen : 0.5,
minimumBlue : 0.5,
alpha : 0.6
});
// 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;
// 计算生成polygon的中心位置
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;
// 实体标签 显示的信息设置
entity.label = {
text : entity.name,//文字
showBackground : false,//背景
scale : 0.6,//标签缩放大小
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
disableDepthTestDistance : Number.POSITIVE_INFINITY
};
}
}
});
/**加载Czml数据 ，从czml文件中 由Cesium.CzmlDataSource 数据加载器加载飞行路径信息**/
// 从czml文件中加载数据
var dronePromise = Cesium.CzmlDataSource.load('https://gist.githubusercontent.com/rahwang/0d1afa6f9e5aa342cb699d26851d97df/raw/5fec1c0cebc097661579143096e796a097c9b629/sampleFlight.czml');
// Save a new drone model entity
var drone;
dronePromise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
drone = dataSource.entities.values[0];
// 加载一个gtlf格式的3D模型
drone.model = {
uri : 'https://gist.githubusercontent.com/rahwang/9843cb77fc1c6d07c287566ed4e08ee3/raw/dc3a9ff6fc73b784519ac9371c0e2cbd3ab3dc47/CesiumDrone.gltf',
minimumPixelSize : 128,
maximumScale : 2000
};
// 实时计算飞行时，模型的巡航角度
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
// 圆滑路径，使路径相对平滑过渡 插值过渡
drone.position.setInterpolationOptions({
interpolationAlgorithm : Cesium.HermitePolynomialApproximation, //插值算法
interpolationDegree : 2
});
//3D笛卡尔坐标点
drone.viewFrom = new Cesium.Cartesian3(-30, 0, 0);
});
/**加载3dTile 数据集 瓦片数据 ，其实就是景观建筑群数据**/
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));//我账号没有该地理资源。。。
// Adjust the tileset height so it's not floating above terrain
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
//3D瓦片的position 位置
var boundingSphere = tileset.boundingSphere;