340 lines
15 KiB
HTML
340 lines
15 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';
|
||
|
||
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> |