html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../../../Build/Cesium/Cesium.js"></script>
<style>
@import url(../../../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#CaidanBtns{
top:5px;
left:700px;
position: absolute;
/*position: relative;*/
/*margin: auto;*/
margin-bottom: auto;
background:rgba(50,50,50,0);
border-radius: 5px;
padding:5px 10px;
color:#fff;
line-height: 150%;
font-size: small;
/*display:inline-block;*/
display:inline;
}
.CaidanClassBtn{
background-color: rgba(42, 42, 42, 0.8);
border-radius: 3px;
padding: 5px 3px;
margin: 3px;
display:block;
border:1px solid;
display:inline;
color:#fff;
width: 30px;
height: 30px;
border-radius: 30px;
}
</style>
</head>
<body>
<div id="cesiumContainer">
<!--<div id="CaidanBtns" style="z-index: 9999">
<button class="CaidanClassBtn" id="planeBtn" style="background-image:url(../data/icon/plane.png); background-size: 100% 100%;"><label></label></button>
</div>-->
</div>
<script src="../js/main.js"></script>
</body>
</html>
js![](https://img-blog.csdnimg.cn/20191104211247892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDg5MDU0,size_16,color_FFFFFF,t_70)
var viewer = new Cesium.Viewer("cesiumContainer");
//去掉版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";
设定了模拟时间的边界
//var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
//var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
var start = new Cesium.JulianDate.fromDate(new Date());
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());//东八区时间
// 结束时间
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
//确保查看器处于预期的时间
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束时
//时间变化来控制速度 // 时间速率,数字越大时间过的越快
viewer.clock.multiplier = 10;
//给时间线设置边界
viewer.timeline.zoomTo(start, stop);
斜线上
//function computeCirclularFlight(lon, lat, hei) {
// var property = new Cesium.SampledPositionProperty();
// //i的增量不能太大,不然差值器无法把图形如愿画出来
// for (var i = 0; i <= 360; i += 30) {
// // var radians = Cesium.Math.toRadians(i);
// var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
// //绕赤道飞
// var position = Cesium.Cartesian3.fromDegrees(lon+i, lat + i, hei);
// //添加sample
// property.addSample(time, position);
// }
// return property;
//}
function mySatePosition (){
this.lon = 0;
this.lat = 0;
this.hei = 700000; //卫星高度
this.phei = 700000 / 2; //轨道高度
this.time = 0;
}
//var oneSate1;
//function getoneState(arr) {
// arr.splice(0, arr.length);
// for (var i = 0; i <= 360; i += 30) {
// var aaa = new mySatePosition();
// aaa.lon = 0;
// aaa.lat = i;
// aaa.time = i;
// arr.push(aaa);
// }
//}
//getoneState(oneSate1);
function computeCirclularFlight(source,panduan) {
var property = new Cesium.SampledPositionProperty();
if (panduan == 1) { //卫星位置
for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, source[i].hei);
// 添加位置,和时间对应
property.addSample(time, position);
}
} else if (panduan == 2) {//轨道位置
for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, source[i].phei);
// 添加位置,和时间对应
property.addSample(time, position);
}
}
return property;
}
//var arrStates = [];
//arrStates.push(oneSate1);
//随机获得位置
var arrStates = [];
function getRandState(brr, count) {
for (var m = 0; m < count; m++) {
var arr = [];
var t1 = Math.floor(Math.random() * 360);
var t2 = Math.floor(Math.random() * 360);
for (var i = t1; i <= 360 + t1; i += 30) {
var aaa = new mySatePosition();
aaa.lon = t2;
aaa.lat = i;
aaa.time = i - t1;
arr.push(aaa);
}
brr.push(arr);
}
for (var m = 0; m < count; m++) {
var arr = [];
var t1 = Math.floor(Math.random() * 360);
var t2 = Math.floor(Math.random() * 360);
for (var i = t1; i <= 360 + t1; i += 30) {
var aaa = new mySatePosition();
aaa.lon = i;
aaa.lat = t2;
aaa.time = i - t1;
arr.push(aaa);
}
brr.push(arr);
}
}
getRandState(arrStates, 3);
function getStatePath(aaa) {
var entity_ty1p = computeCirclularFlight(aaa, 2);
var entity_ty1 = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: entity_ty1p, //轨道高度
orientation: new Cesium.VelocityOrientationProperty(entity_ty1p),
cylinder: {
HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
length: 700000,
topRadius: 0,
bottomRadius: 700000 / 2,
material: Cesium.Color.RED.withAlpha(.4),
outline: !0,
numberOfVerticalLines: 0,
outlineColor: Cesium.Color.RED.withAlpha(.8)
},
});
entity_ty1.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
var entity1p = computeCirclularFlight(aaa, 1);
//创建实体
var entity1 = viewer.entities.add({
// 将实体availability设置为与模拟时间相同的时间间隔。
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: entity1p,//计算实体位置属性
//基于位置移动自动计算方向.
orientation: new Cesium.VelocityOrientationProperty(entity1p),
//加载飞机模型
model: {
uri: '../data/gltfModel/CesiumAir/Cesium_Air.gltf ',
minimumPixelSize: 32
},
//路径
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.PINK
}),
width: 5
}
});
//差值器
entity1.position.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
});
}
function startfunc() {
for (var i = 0; i < arrStates.length; i++) {
getStatePath(arrStates[i]);
}
}
startfunc();