269 lines
10 KiB
HTML
269 lines
10 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;
|
|||
|
|
}
|
|||
|
|
</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">
|
|||
|
|
<el-button @click="runTrack">开始</el-button>
|
|||
|
|
<el-button @click="stop">暂停</el-button>
|
|||
|
|
<el-button @click="camera.moveRight(10)">moveRight</el-button>
|
|||
|
|
<el-button @click="camera.moveForward(10)">moveForward</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data() {
|
|||
|
|
let flyHeight = 13177;
|
|||
|
|
return {
|
|||
|
|
visible: false,
|
|||
|
|
trackData: [
|
|||
|
|
[106.506124,33.116968,flyHeight],//发源地
|
|||
|
|
[106.770778,33.139915,flyHeight],
|
|||
|
|
[106.864934,33.154622,flyHeight],
|
|||
|
|
|
|||
|
|
[107.076074,33.032626,flyHeight],
|
|||
|
|
[107.330440,33.131871,flyHeight],
|
|||
|
|
[107.604270,33.206266,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.825239,30.784890,flyHeight],
|
|||
|
|
[113.651361,30.865274,flyHeight],
|
|||
|
|
[114.282617,30.568286,flyHeight],// 入江口
|
|||
|
|
],
|
|||
|
|
orientation: {
|
|||
|
|
heading: 6.051403815715789,
|
|||
|
|
pitch: -0.30439954732397,
|
|||
|
|
roll: 6.283182924415642,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initViewer() {
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
geocoder: false, //位置查找
|
|||
|
|
homeButton: false, //视图返回初始位置
|
|||
|
|
sceneModePicker: false, //视角选择器
|
|||
|
|
// baseLayerPicker:false,//底图选择器
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
animation: true, //动画控制器
|
|||
|
|
// creditContainer:"credit",//版权显示
|
|||
|
|
timeline: true, //时间线
|
|||
|
|
fullscreenButton: false, //全屏控件
|
|||
|
|
vrButton: false,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//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);
|
|||
|
|
|
|||
|
|
//Set bounds of our simulation time
|
|||
|
|
const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
|
|||
|
|
const stop = Cesium.JulianDate.addSeconds(
|
|||
|
|
start,
|
|||
|
|
360,
|
|||
|
|
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;
|
|||
|
|
//Set timeline to simulation bounds
|
|||
|
|
viewer.timeline.zoomTo(start, stop);
|
|||
|
|
|
|||
|
|
window.viewer = viewer;
|
|||
|
|
window.camera = viewer.camera;
|
|||
|
|
window.scene = viewer.scene;
|
|||
|
|
this.start = start;
|
|||
|
|
this.stop = stop;
|
|||
|
|
|
|||
|
|
const position = this.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,
|
|||
|
|
}),
|
|||
|
|
]),
|
|||
|
|
//使用计算的位置
|
|||
|
|
position: position,
|
|||
|
|
//Automatically compute orientation based on position movement.
|
|||
|
|
orientation: orientation,
|
|||
|
|
//Load the Cesium plane model to represent the entity
|
|||
|
|
model: {
|
|||
|
|
show: false,
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
viewer.zoomTo(entity);
|
|||
|
|
this.flyEntity = entity;
|
|||
|
|
this.initEvent(viewer)
|
|||
|
|
},
|
|||
|
|
initEvent(viewer){
|
|||
|
|
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)
|
|||
|
|
},
|
|||
|
|
runTrack() {
|
|||
|
|
viewer.clock.shouldAnimate = true;// 播放
|
|||
|
|
// viewer.trackedEntity = this.flyEntity;
|
|||
|
|
},
|
|||
|
|
stop(){
|
|||
|
|
viewer.clock.shouldAnimate = false;// 暂停
|
|||
|
|
viewer.trackedEntity = null;
|
|||
|
|
},
|
|||
|
|
//Generate a random circular pattern with varying heights.
|
|||
|
|
// 生成具有不同高度的随机圆形图案
|
|||
|
|
computeCirclularFlight(lon, lat, radius) {
|
|||
|
|
const property = new Cesium.SampledPositionProperty();
|
|||
|
|
property.setInterpolationOptions({
|
|||
|
|
interpolationDegree: 2, // 双线性插值
|
|||
|
|
// c插值算法： LagrangePolynomialApproximation ， LinearApproximation ， HermitePolynomialApproximation
|
|||
|
|
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
|
|||
|
|
});
|
|||
|
|
for (let i = 0; i < this.trackData.length; i ++) {
|
|||
|
|
const radians = Cesium.Math.toRadians(i);
|
|||
|
|
const time = Cesium.JulianDate.addSeconds(
|
|||
|
|
this.start,
|
|||
|
|
i,
|
|||
|
|
new Cesium.JulianDate()
|
|||
|
|
);
|
|||
|
|
console.log(this.trackData[i])
|
|||
|
|
const position = Cesium.Cartesian3.fromDegrees(
|
|||
|
|
this.trackData[i][0],
|
|||
|
|
this.trackData[i][1],
|
|||
|
|
this.trackData[i][2],
|
|||
|
|
);
|
|||
|
|
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;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initViewer();
|
|||
|
|
// this.initEvent();
|
|||
|
|
// this.createModel();
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|