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>
|