482 lines
16 KiB
HTML
482 lines
16 KiB
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>Learning Cesium!</title>
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#app,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.menu-container {
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 100px;
|
||
z-index: 9999;
|
||
}
|
||
.m{
|
||
background: linear-gradient(to left,#ffffff,#ffffff) left bottom no-repeat,
|
||
linear-gradient(to bottom,#ffffff,#ffffff) left bottom no-repeat,
|
||
linear-gradient(to left,#ffffff,#ffffff) right bottom no-repeat,
|
||
linear-gradient(to left,#ffffff,#ffffff) right bottom no-repeat;
|
||
}
|
||
.fly-box{
|
||
padding-top: 44px;
|
||
padding-bottom: 10px;
|
||
width: 300px;
|
||
z-index: 900;
|
||
right: 10px;
|
||
top: 79px;
|
||
left: 59px;
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
z-index: 999!important;
|
||
z-index: 100;
|
||
border-bottom: 1px solid #008aff70;
|
||
border-left: 1px solid #008aff70;
|
||
border-right: 1px solid #008aff70;
|
||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||
border-radius: 0;
|
||
background: linear-gradient(to left,#ffffff,#ffffff) left bottom no-repeat,
|
||
linear-gradient(to bottom,#ffffff,#ffffff) left bottom no-repeat,
|
||
linear-gradient(to left,#ffffff,#ffffff) right bottom no-repeat,
|
||
linear-gradient(to left,#ffffff,#ffffff) right bottom no-repeat;
|
||
background-size: 1px 10px,10px 1px,1px 10px,10px 1px;
|
||
background-color: rgba(22, 51, 76,.8)!important;
|
||
}
|
||
.fly-title{
|
||
height: 44px;
|
||
width: 100%;
|
||
line-height: 44px;
|
||
overflow: hidden;
|
||
height: 41px;
|
||
line-height: 41px;
|
||
font-size: 18px;
|
||
color: var(--mars-alert-title-color);
|
||
background: url(http://mars3d.cn/project/vue/assets/msg-title-bg.53c38de6.png);
|
||
background-size: 10px 44px;
|
||
padding: 0 5px 0 10px;
|
||
color: #fff;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
}
|
||
.fly-title i{
|
||
float: right;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
line-height: 40px;
|
||
}
|
||
.fly-content{
|
||
height: 100%;
|
||
overflow: auto;
|
||
padding: 5px 15px;
|
||
}
|
||
.fly-operation{
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
padding-top: 10px;
|
||
}
|
||
.fly-operation button{
|
||
height: 32px;
|
||
background: rgba(0, 138, 255, .5);
|
||
border: none;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
|
||
}
|
||
.fly-operation button i{
|
||
padding: 0 5px;
|
||
cursor: pointer;
|
||
}
|
||
.fly-table{
|
||
clear: both;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
transition: opacity .3s;
|
||
color:#cdcdcd;
|
||
font-size: 12px;
|
||
border: solid 1px;
|
||
border-color: #0b67b7;
|
||
border-top-color: #c1c1d5;
|
||
min-height: 180px;
|
||
}
|
||
.fly-table table{
|
||
width: 100%;
|
||
border-spacing: 0;
|
||
border-collapse: separate;
|
||
}
|
||
.fly-table table td,fly-table table th{
|
||
padding: 10px;
|
||
}
|
||
.fly-table-header{
|
||
background: rgba(0, 138, 255, .2);
|
||
/* text-align: left; */
|
||
height: 32px;
|
||
}
|
||
.fly-table-body{
|
||
background: rgba(22, 51, 76,.5);
|
||
color: white;
|
||
}
|
||
.fly-table-operation{
|
||
text-align: center;
|
||
}
|
||
.fly-table-operation i{
|
||
padding: 0 2px;
|
||
cursor: pointer;
|
||
}
|
||
.handle{
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
z-index: 1;
|
||
width: 10px;
|
||
height: 10px;
|
||
opacity: 0;
|
||
}
|
||
.handle-l{
|
||
height: auto;
|
||
top: 10px;
|
||
left: 0;
|
||
bottom: 10px;
|
||
}
|
||
.handle-r{
|
||
height: auto;
|
||
top: 10px;
|
||
right: 0;
|
||
bottom: 10px;
|
||
}
|
||
.handle-t{
|
||
width: auto;
|
||
top: 0;
|
||
left: 10px;
|
||
right: 10px;
|
||
}
|
||
.handle-b{
|
||
width: auto;
|
||
bottom: 0;
|
||
left: 10px;
|
||
right: 10px;
|
||
}
|
||
.handle-lb{
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
.handle-rb{
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
</style>
|
||
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="./js/elementui/index.css" />
|
||
<!-- import Vue before Element -->
|
||
<script src="./js/vue2710.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="./js/elementui/index.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="menu-container">
|
||
<div class="fly-box">
|
||
<div class="fly-title">
|
||
<label>飞行漫游</label>
|
||
<i class="el-icon-close"></i>
|
||
</div>
|
||
<div class="fly-content">
|
||
<div class="fly-tab-path">
|
||
<div class="fly-operation">
|
||
<button><i class="el-icon-circle-plus-outline"></i>新增路线</button>
|
||
<button>导入</button>
|
||
<!-- <button>导出</button> -->
|
||
</div>
|
||
<div class="fly-table">
|
||
<table>
|
||
<thead class="fly-table-header">
|
||
<tr><th style="width: 150px;text-align: left;padding-left: 10px;">名称</th><th style="text-align: center">操作</th></tr>
|
||
</thead>
|
||
<tbody class="fly-table-body">
|
||
<tr>
|
||
<td>path1</td>
|
||
<td class="fly-table-operation">
|
||
<i title="漫游" class="el-icon-s-promotion"></i>
|
||
<i title="编辑" class="el-icon-edit-outline"></i>
|
||
<i title="删除" class="el-icon-delete"></i>
|
||
<i title="导出" class="el-icon-printer"></i>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>path3</td>
|
||
<td class="fly-table-operation">
|
||
<i title="漫游" class="el-icon-s-promotion"></i>
|
||
<i title="编辑" class="el-icon-edit-outline"></i>
|
||
<i title="删除" class="el-icon-delete"></i>
|
||
<i title="导出" class="el-icon-printer"></i>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="fly-tab-coord" v-show="fly.showCoord">
|
||
<div class="title-box">
|
||
<label>路线名称：</label>
|
||
<select></select>
|
||
</div>
|
||
<div class="path-coord">
|
||
<div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="handle handle-l"></div>
|
||
<div class="handle handle-r"></div>
|
||
<div class="handle handle-t"></div>
|
||
<div class="handle handle-b"></div>
|
||
<div class="handle handle-lb"></div>
|
||
<div class="handle handle-rb"></div>
|
||
</div>
|
||
<el-button @click="playing(1)">开始</el-button>
|
||
<el-button @click="playing(0)">暂停</el-button>
|
||
<el-button @click="showModel(1)">显示路径</el-button>
|
||
<el-button @click="showModel(0)">隐藏路径</el-button>
|
||
</div>
|
||
|
||
<div id="cesiumContainer"></div>
|
||
</div>
|
||
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
new Vue({
|
||
el: "#app",
|
||
data() {
|
||
return {
|
||
fly:{
|
||
showCoord:false
|
||
},
|
||
visible: false,
|
||
trackData: [
|
||
[-2264042.839776213, 4900416.057746451, 3385983.014957804],
|
||
[-2263927.6347972867, 4900332.37135091, 3386143.168313143],
|
||
[-2263660.1017446117, 4899815.142609451, 3387070.379198967],
|
||
],
|
||
orientation: {
|
||
heading: 6.051403815715789,
|
||
pitch: -0.30439954732397,
|
||
roll: 6.283182924415642,
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
playing(flag){
|
||
viewer.clock.shouldAnimate = !!flag;
|
||
viewer.trackedEntity = flag?this.entity:undefined;
|
||
},
|
||
showModel(flag){
|
||
this.entity.show = !!flag
|
||
},
|
||
initViewer() {
|
||
var viewer = new Cesium.Viewer("cesiumContainer", {
|
||
geocoder: false, //位置查找
|
||
homeButton: false, //视图返回初始位置
|
||
sceneModePicker: false, //视角选择器
|
||
// baseLayerPicker:false,//底图选择器
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
animation: true, //动画控制器
|
||
shouldAnimate: true, // Enable animations
|
||
// creditContainer:"credit",//版权显示
|
||
timeline: true, //时间线
|
||
fullscreenButton: false, //全屏控件
|
||
vrButton: false,
|
||
});
|
||
|
||
var tileset = new Cesium.Cesium3DTileset({
|
||
url: "./SampleData/cesiumlab/tileset.json",
|
||
dynamicScreenSpaceError: true,
|
||
dynamicScreenSpaceErrorDensity: 0.00278,
|
||
dynamicScreenSpaceErrorFactor: 4.0,
|
||
dynamicScreenSpaceErrorHeightFalloff: 0.25,
|
||
});
|
||
viewer.scene.primitives.add(tileset);
|
||
viewer.zoomTo(tileset);
|
||
|
||
window.viewer = viewer;
|
||
window.camera = viewer.camera;
|
||
window.scene = viewer.scene;
|
||
},
|
||
initTimeline(){
|
||
var start = Cesium.JulianDate.fromDate(new Date("2022-10-9"));
|
||
var stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
this.trackData.length - 1,
|
||
new Cesium.JulianDate()
|
||
);
|
||
this.start = start;
|
||
this.stop = stop;
|
||
//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 = 0.06;
|
||
//Set timeline to simulation bounds
|
||
viewer.timeline.zoomTo(start, stop);
|
||
},
|
||
runTrack() {
|
||
console.log("=====================");
|
||
let camera = window.viewer.camera;
|
||
camera.setView({
|
||
destination: new Cesium.Cartesian3.fromArray(this.trackData[0]),
|
||
orientation: this.orientation,
|
||
});
|
||
// this.points = this.calcInterval();
|
||
// this.time = 1;
|
||
// this.playing();
|
||
// camera.flyTo({
|
||
// destination: new Cesium.Cartesian3.fromArray(this.trackData[1]),
|
||
// orientation: this.orientation,
|
||
// duration: 5,
|
||
// complete: () => {
|
||
// camera.flyTo({
|
||
// destination: new Cesium.Cartesian3.fromArray(
|
||
// this.trackData[2]
|
||
// ),
|
||
// orientation: this.orientation,
|
||
// duration: 5,
|
||
// });
|
||
// },
|
||
// });
|
||
},
|
||
createModel() {
|
||
|
||
//Actually create the entity
|
||
var entity = viewer.entities.add({
|
||
//Set the entity availability to the same interval as the simulation time.
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: this.start,
|
||
stop: this.stop,
|
||
}),
|
||
]),
|
||
//Use our computed positions
|
||
position: this.position,
|
||
//Automatically compute orientation based on position movement.
|
||
orientation: this.orientation,
|
||
model: {
|
||
uri: "./SampleData/models/CesiumAir/Cesium_Air.glb",
|
||
minimumPixelSize: 64,
|
||
show: true,
|
||
},
|
||
//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.fromCssColorString("rgba(0,0,0,1)"),
|
||
}),
|
||
width: 1,
|
||
},
|
||
});
|
||
this.entity = entity;
|
||
//追踪物体
|
||
viewer.trackedEntity = entity;
|
||
},
|
||
computeCirclularFlight() {
|
||
var property = new Cesium.SampledPositionProperty();
|
||
//设置插入选项
|
||
property.setInterpolationOptions({
|
||
// interpolationDegree: 1,
|
||
// interpolationAlgorithm: Cesium.LinearApproximation,
|
||
|
||
// interpolationDegree: 5,
|
||
// interpolationAlgorithm:
|
||
// Cesium.LagrangePolynomialApproximation,
|
||
|
||
interpolationDegree: 2,
|
||
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
|
||
});
|
||
for (var i = 0; i < this.trackData.length; i++) {
|
||
var time = Cesium.JulianDate.addSeconds(
|
||
this.start,
|
||
i,
|
||
new Cesium.JulianDate()
|
||
);
|
||
var position = Cesium.Cartesian3.fromArray(this.trackData[i]);
|
||
property.addSample(time, position);
|
||
}
|
||
return property;
|
||
},
|
||
initEvent() {
|
||
// let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
||
// handler.setInputAction((movement) => {
|
||
// let pick = scene.pick(movent.position);
|
||
// // if(){
|
||
|
||
// // }
|
||
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
//监听时间变化
|
||
viewer.clock.onTick.addEventListener((e)=>{
|
||
if(viewer.clock.shouldAnimate === true){
|
||
let ori = this.orientation.getValue(viewer.clock.currentTime);//获取偏向角
|
||
let center = this.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))//将相机向后面放一点
|
||
}
|
||
});
|
||
},
|
||
readyPath(){
|
||
// 给轨迹点关联时间和插值
|
||
const property = new Cesium.SampledPositionProperty();
|
||
property.setInterpolationOptions({
|
||
interpolationDegree: 5,
|
||
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,//设置插值算法
|
||
});
|
||
for (var i = 0; i < this.trackData.length; i++) {
|
||
var time = Cesium.JulianDate.addSeconds(
|
||
this.start,
|
||
i,
|
||
new Cesium.JulianDate()
|
||
);
|
||
var position = Cesium.Cartesian3.fromArray(this.trackData[i]);
|
||
property.addSample(time, position);
|
||
}
|
||
this.position = property;
|
||
|
||
this.orientation = new Cesium.VelocityOrientationProperty(property)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initViewer();
|
||
this.initTimeline();
|
||
this.readyPath();
|
||
this.initEvent();
|
||
this.createModel();
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|