237 lines
12 KiB
HTML
237 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html, body, #cesiumContainer {
|
||
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
||
}
|
||
#tools-container{
|
||
position: absolute;
|
||
top:100px;
|
||
left: 50px;
|
||
z-index: 9;
|
||
}
|
||
#tools-container1{
|
||
position: absolute;
|
||
top:150px;
|
||
left: 50px;
|
||
z-index: 9;
|
||
}
|
||
#slideTest1{
|
||
width: 150px;
|
||
}
|
||
</style>
|
||
|
||
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script> -->
|
||
<!-- <link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
|
||
<!-- 引入 layui.css -->
|
||
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
|
||
<!-- 引入 layui.js -->
|
||
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<div id="tools-container">
|
||
<button class="layui-btn layui-btn-primary demo1">
|
||
插值方式
|
||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||
</button>
|
||
<button type="button" class="layui-btn layui-btn-primary" onclick="playing(1)">开始</button>
|
||
<button type="button" class="layui-btn layui-btn-primary" onclick="playing(0)">取消</button>
|
||
<button type="button" class="layui-btn layui-btn-primary" onclick="showModel(1)">显示路径</button>
|
||
<button type="button" class="layui-btn layui-btn-primary" onclick="showModel(0)">隐藏路径</button>
|
||
</div>
|
||
<div id="tools-container1">
|
||
<div id="slideTest1" class="demo-slider"></div>
|
||
</div>
|
||
<script>
|
||
layui.use(['dropdown', 'util', 'layer', 'table'], function(){
|
||
var dropdown = layui.dropdown
|
||
,util = layui.util
|
||
,layer = layui.layer
|
||
,table = layui.table
|
||
,slider = layui.slider
|
||
,$ = layui.jquery;
|
||
|
||
// LagrangePolynomialApproximation
|
||
// LinearApproximation
|
||
// HermitePolynomialApproximation
|
||
|
||
dropdown.render({
|
||
elem: '.demo1'
|
||
,data: [{
|
||
title: 'LinearApproximation'
|
||
,id: 100
|
||
},{
|
||
title: 'LagrangePolynomialApproximation'
|
||
,id: 101
|
||
},{
|
||
title: 'HermitePolynomialApproximation'
|
||
,id: 102
|
||
}]
|
||
,click: function(obj){
|
||
// layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
|
||
position.setInterpolationOptions({
|
||
interpolationDegree: 5,
|
||
interpolationAlgorithm: Cesium[obj.title],
|
||
})
|
||
}
|
||
});
|
||
|
||
var interType = {
|
||
"Hermite":"HermitePolynomialApproximation",
|
||
"Linear":"LinearApproximation",
|
||
"Lagrange": "LagrangePolynomialApproximation",// LagrangePolynomialApproximation
|
||
// LinearApproximation
|
||
// HermitePolynomialApproximation
|
||
}
|
||
//默认滑块
|
||
slider.render({
|
||
elem: '#slideTest1'
|
||
,change: function(value){
|
||
|
||
position.setInterpolationOptions({
|
||
interpolationDegree: value,
|
||
interpolationAlgorithm: Cesium[interType[position["interpolationAlgorithm"]]],
|
||
})
|
||
}
|
||
});
|
||
})
|
||
// 参考连接：https://sandcastle.cesium.com/#c=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
|
||
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
||
|
||
// 用到了时间系统，需要设置 clock、timeline
|
||
// Cesium中的Clock控件包含两部分: Animation控件和Timeline控件，Animetion控制时间的启动和暂停，Timeline控制时间线，两个控件绑定在一起，同时出现或隐藏。
|
||
var viewer = new Cesium.Viewer('cesiumContainer',{
|
||
infoBox: false, //Disable InfoBox widget
|
||
selectionIndicator: false, //Disable selection indicator
|
||
shouldAnimate: true, // Enable animations
|
||
terrainProvider: Cesium.createWorldTerrain()
|
||
});
|
||
|
||
|
||
// Enable lighting based on the sun position
|
||
viewer.scene.globe.enableLighting = true;
|
||
// Enable depth testing so things behind the terrain disappear.
|
||
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
// Set the random number seed for consistent results.
|
||
Cesium.Math.setRandomNumberSeed(3);
|
||
|
||
// Clolck以儒略日记录时间，我国采用北京时间，而Cesium显示协调世界时，则存在时间差问题，北京时间与协调世界时相差8个小时.
|
||
// 例如。在Clock设置时间为12点，那么控件显示的时间将为4点，所以在设置时间时需要加8个小时才会显示为北京时间。
|
||
// Set bounds of our simulation time
|
||
const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16 + 8));
|
||
const stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
180,
|
||
new Cesium.JulianDate()
|
||
);
|
||
//Make sure viewer is at the desired time.
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
|
||
viewer.clock.multiplier = 10;
|
||
|
||
//Generate a random circular pattern with varying heights.
|
||
function computeCirclularFlight(lon, lat, radius) {
|
||
const property = new Cesium.SampledPositionProperty();
|
||
for (let i = 0; i <= 180; i += 45) {
|
||
const radians = Cesium.Math.toRadians(i);
|
||
const time = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
i,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const position = Cesium.Cartesian3.fromDegrees(
|
||
lon + radius * 1.5 * Math.cos(radians),
|
||
lat + radius * Math.sin(radians),
|
||
Cesium.Math.nextRandomNumber() * 500 + 1750
|
||
);
|
||
property.addSample(time, position);
|
||
|
||
//Also create a point for each sample we generate.
|
||
viewer.entities.add({
|
||
position: position,
|
||
point: {
|
||
pixelSize: 8,
|
||
color: Cesium.Color.TRANSPARENT,
|
||
outlineColor: Cesium.Color.YELLOW,
|
||
outlineWidth: 3,
|
||
},
|
||
});
|
||
}
|
||
return property;
|
||
}
|
||
viewer.camera.setView({
|
||
destination : Cesium.Cartesian3.fromDegrees(-112.110693, 36.0994841, 15000.0)
|
||
});
|
||
|
||
//Compute the entity position property.
|
||
var position = computeCirclularFlight(-112.110693, 36.0994841, 0.03);
|
||
let orientation = new Cesium.VelocityOrientationProperty(position)
|
||
|
||
//监听时间变化
|
||
// viewer.clock.onTick.addEventListener(function(e){
|
||
// if(viewer.clock.shouldAnimate === true){
|
||
// let ori = orientation.getValue(viewer.clock.currentTime);//获取偏向角
|
||
// let center = position.getValue(viewer.clock.currentTime);//获取位置
|
||
// let transform = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(ori), center);//将偏向角转为3*3矩阵，利用实时点位转为4*4矩阵
|
||
// viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(-100, 0, 0))//将相机向后面放一点
|
||
// }
|
||
// });
|
||
|
||
//Actually create the entity
|
||
const entity = viewer.entities.add({
|
||
show:true,
|
||
//Set the entity availability to the same interval as the simulation time.
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: start,
|
||
stop: stop,
|
||
}),
|
||
]),
|
||
|
||
//Use our computed positions
|
||
position: position,
|
||
|
||
//Automatically compute orientation based on position movement.
|
||
orientation: orientation,
|
||
|
||
//Load the Cesium plane model to represent the entity
|
||
model: {
|
||
uri: "./SampleData/models/CesiumAir/Cesium_Air.glb",
|
||
minimumPixelSize: 64,
|
||
},
|
||
|
||
//Show the path as a pink line sampled in 1 second increments.
|
||
path: {
|
||
resolution: 1,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
glowPower: 0.1,
|
||
color: Cesium.Color.YELLOW,
|
||
}),
|
||
width: 10,
|
||
},
|
||
});
|
||
|
||
entity.position.setInterpolationOptions({
|
||
interpolationDegree: 5,
|
||
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
|
||
});
|
||
|
||
function playing(flag){
|
||
viewer.clock.shouldAnimate = !!flag;
|
||
viewer.trackedEntity = flag?entity:undefined;
|
||
}
|
||
function showModel(flag){
|
||
entity.show = !!flag
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |