learning_cesium/轨迹漫游插值测试.html

340 lines
15 KiB
HTML
Raw Normal View History

2024-03-19 18:06:25 +08:00
<!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';
var flyHeight = 13177;
var pathPoints = [
[106.506124,33.116968,flyHeight],//发源地
[106.814191,33.141123,flyHeight],
[107.079409,33.035958,flyHeight],
[107.428704,33.182375,flyHeight],
[107.778450,33.173613,flyHeight],//上游
[108.648934,32.527624,flyHeight],
[109.642762,32.904012,flyHeight],
[110.615992,32.828365,flyHeight],
[111.069476,32.622887,flyHeight],//中游
[111.710542,32.231320,flyHeight],
[112.143726,31.848392,flyHeight],
[112.447286,31.399614,flyHeight],
[112.565470,31.005892,flyHeight],
[112.616911,30.681574,flyHeight],//下游
[112.873963,30.543135,flyHeight],
[113.470911,30.383645,flyHeight],
[113.800695,30.596515,flyHeight],
[113.948545,30.652993,flyHeight],
[114.048010,30.595710,flyHeight],
[114.282617,30.568286,flyHeight],// 入江口
]
// 用到了时间系统,需要设置 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,
pathPoints.length-1,
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 = 1;
viewer.timeline.zoomTo(start, stop);
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (evt) {
//捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
var cartesian3 = viewer.camera.pickEllipsoid(evt.position);
// let cartesian3 = viewer.scene.pickPosition(evt.position);
if (cartesian3) {
//将笛卡尔三维坐标转为地图坐标(弧度)
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
//将地图坐标(弧度)转为十进制的度数
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
console.log(log_String+","+lat_String)
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
var position = computeCirclularFlight();
let orientation = new Cesium.VelocityOrientationProperty(position)
viewer.zoomTo(viewer.entities);
//监听时间变化
// 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))//将相机向后面放一点
// }
// });
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.RED,
}),
width: 10,
},
});
entity.position.setInterpolationOptions({
interpolationDegree: 2,
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
});
function playing(flag){
viewer.clock.shouldAnimate = !!flag;
viewer.trackedEntity = flag?entity:undefined;
}
function showModel(flag){
entity.show = !!flag
}
function computeCirclularFlight() {
// 给轨迹点关联时间和插值
const property = new Cesium.SampledPositionProperty();
var controls= [];
var times =[];
for (var i = 0; i < pathPoints.length; i++) {
var time = Cesium.JulianDate.addSeconds( start, i, new Cesium.JulianDate() );
var position = Cesium.Cartesian3.fromDegrees( ...pathPoints[i] );
property.addSample(time, position);
viewer.entities.add({
position: position,
point: {
color: Cesium.Color.SKYBLUE,
pixelSize: 10,
outlineColor: Cesium.Color.YELLOW,
outlineWidth: 3,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
controls.push(position);
times.push(i);
}
// // HermiteSpline
// var spline = Cesium.HermiteSpline.createNaturalCubic({
// times: times,
// points: controls
// });
// var positions = [];
// for (var i = 0; i <= 100; i++) {
// var cartesian3 = spline.evaluate(i / 100);
// positions.push(cartesian3);
// viewer.entities.add({
// position: cartesian3,
// point: {
// color: Cesium.Color.WHITE,
// pixelSize: 6
// }
// });
// }
// viewer.entities.add({
// name: 'HermiteSpline',
// polyline: {
// positions: positions,
// width: 3,
// material: Cesium.Color.RED
// }
// });
return property;
}
// 创建样条插值
// 控制点
var controls =[];
for(let i=0;i<pathPoints.length;i++){
controls.push(Cesium.Cartesian3.fromDegrees(...pathPoints[i]))
}
var timess = []
for(let i=0;i<=1;i+=0.05){
timess.push(i)
}
// HermiteSpline
var spline = Cesium.HermiteSpline.createClampedCubic({
times: timess,
points: controls
});
var positions = [];
for (var i = 0; i <= 100; i++) {
var cartesian3 = spline.evaluate(i / 100);
positions.push(cartesian3);
viewer.entities.add({
position: cartesian3,
point: {
color: Cesium.Color.WHITE,
pixelSize: 6
}
});
}
viewer.entities.add({
name: 'HermiteSpline',
polyline: {
positions: positions,
width: 3,
material: Cesium.Color.RED
}
});
</script>
</body>
</html>