247 lines
9.6 KiB
HTML
247 lines
9.6 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>
|
|||
|
|
<!-- 引入样式 -->
|
|||
|
|
<link rel="stylesheet" href="./js/elementui/index.css" />
|
|||
|
|
<script src="./js/vue2710.js"></script>
|
|||
|
|
<script src="./js/elementui/index.js"></script>
|
|||
|
|
<script src="./XbsjCesium/Cesium.js"></script>
|
|||
|
|
<script src="./js/XbsjEarth/XbsjEarth.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>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div
|
|||
|
|
id="vueApp"
|
|||
|
|
style="width: 100%; height: 100%; background: grey; position: relative"
|
|||
|
|
>
|
|||
|
|
<earth-comp></earth-comp>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
// 1 创建Earth的vue组件
|
|||
|
|
var EarthComp = {
|
|||
|
|
template: `
|
|||
|
|
<div style="width: 100%; height: 100%">
|
|||
|
|
<div ref="earthContainer" style="width: 100%; height: 100%">
|
|||
|
|
</div>
|
|||
|
|
<div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:350px; font-size:24px; font-family: 宋体;">
|
|||
|
|
<div class="defultbtn" :class="{'btnon':playing}" @click="playing = !playing">路径播放</div>
|
|||
|
|
<div class="defultbtn" style="margin-left:20px;" :class="{'btnon':cameraAttached}" @click=cameraAttachedClick>相机绑定</div><br/>
|
|||
|
|
<span @click="show = !show" class="checkbox"><input class="fly" type="checkbox" v-model="show">路径显隐</span><br/>
|
|||
|
|
<span>当前速度: {{ currentSpeed }}m/s</span><br/>
|
|||
|
|
<span><input type="range" min="0" max="100" step="1" v-model.number="currentSpeed"></span><br/>
|
|||
|
|
<span>当前位置：{{currentD | numFilter}}米</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
_earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
|
|||
|
|
show: true, // 控制路径的显示与隐藏，默认为隐藏
|
|||
|
|
// 当前播放速度，单位为米/秒。
|
|||
|
|
// 注意，此属性可以实时修改，修改后的速度立即生效，所以可以动态修改路径上物体的前进速度！
|
|||
|
|
currentSpeed: 0,
|
|||
|
|
// 当前步进距离
|
|||
|
|
// 指当前播放状态下由第一个关键点沿路径运动到当前位置的长度，单位是米。
|
|||
|
|
// 当前playing属性为false时，此属性恒定不变；当playing为true，此属性会自动增加。 随着currentD的变化，会实时计算currentPosition、currentRotation这两个属性。 currentPosition指当前位置，currentRotation指当前姿态
|
|||
|
|
currentD: 0,
|
|||
|
|
playing: true,
|
|||
|
|
cameraAttached: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// 1.1 资源创建
|
|||
|
|
mounted() {
|
|||
|
|
// 1.1.1 创建地球
|
|||
|
|
var earth = new XE.Earth(this.$refs.earthContainer);
|
|||
|
|
|
|||
|
|
// 1.1.2 场景配置
|
|||
|
|
earth.sceneTree.root = {
|
|||
|
|
expand: true,
|
|||
|
|
title: "预览场景",
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
ref: "tileset",
|
|||
|
|
czmObject: {
|
|||
|
|
name: "大雁塔",
|
|||
|
|
xbsjType: "Tileset",
|
|||
|
|
url: "./SampleData/Cesium3DTiles/dayanta/tileset.json",
|
|||
|
|
xbsjUseOriginTransform: false,
|
|||
|
|
skipLevelOfDetail: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
ref: "path1",
|
|||
|
|
czmObject: {
|
|||
|
|
xbsjType: "Path",
|
|||
|
|
positions: [
|
|||
|
|
[1.9016746584889261, 0.5972140444354529, 540.3422462577171],
|
|||
|
|
[1.9017267341518718, 0.5972133503414322, 520.1137699152557],
|
|||
|
|
[1.9017257997179968, 0.5972736030398242, 528.3876170108886],
|
|||
|
|
[1.9016747349263112, 0.5972754003153069, 521.087861389408],
|
|||
|
|
],
|
|||
|
|
rotations: [
|
|||
|
|
[
|
|||
|
|
6.868275118748086, -0.2742692911775144,
|
|||
|
|
0.0016584301080495578,
|
|||
|
|
],
|
|||
|
|
[
|
|||
|
|
5.703866308921896, -0.19385405041989068,
|
|||
|
|
6.281509509407803,
|
|||
|
|
],
|
|||
|
|
[
|
|||
|
|
3.8005195675504133, -0.2597408290639396,
|
|||
|
|
6.281339310424716,
|
|||
|
|
],
|
|||
|
|
[
|
|||
|
|
2.501667530825695, -0.2173829253288364,
|
|||
|
|
0.001819016773946025,
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
show: true, // 显示路径
|
|||
|
|
loop: true, // 是否为环线
|
|||
|
|
showDirection: false, // 显示方向(默认为true)
|
|||
|
|
playing: true, // 飞行
|
|||
|
|
// 是否循环播放
|
|||
|
|
// 如果为false，则playing设置为true时，会从当前位置播放到最后一个关键点，并停止播放，此时playing属性会自动变成false。 若此属性为true时，播放到最后一个关键点以后，将自动重第一个关键点继续播放。
|
|||
|
|
loopPlay: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
czmObject: {
|
|||
|
|
name: "默认影像",
|
|||
|
|
xbsjType: "Imagery",
|
|||
|
|
xbsjImageryProvider:
|
|||
|
|
XE.Obj.Imagery.defaultImageryProviderConfig,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var tileset = earth.sceneTree.$refs.tileset.czmObject;
|
|||
|
|
var path1 = earth.sceneTree.$refs.path1.czmObject;
|
|||
|
|
|
|||
|
|
// 定义一个pin用来跟踪路径
|
|||
|
|
const pin = new XE.Obj.Pin(earth);
|
|||
|
|
|
|||
|
|
// 飞入大雁塔
|
|||
|
|
path1.flyTo();
|
|||
|
|
|
|||
|
|
// 1.1.3 数据绑定
|
|||
|
|
// 双向绑定的属性，如果一方发生变化，另一方同样会跟随变化
|
|||
|
|
this._showUnbind = XE.MVVM.bind(this, "show", path1, "show");
|
|||
|
|
this._currentSpeedUnbind = XE.MVVM.bind(
|
|||
|
|
this,
|
|||
|
|
"currentSpeed",
|
|||
|
|
path1,
|
|||
|
|
"currentSpeed"
|
|||
|
|
);
|
|||
|
|
this._currentDUnbind = XE.MVVM.bind(
|
|||
|
|
this,
|
|||
|
|
"currentD",
|
|||
|
|
path1,
|
|||
|
|
"currentD"
|
|||
|
|
);
|
|||
|
|
this._cameraAttachedUnbind = XE.MVVM.bind(
|
|||
|
|
this,
|
|||
|
|
"cameraAttached",
|
|||
|
|
path1,
|
|||
|
|
"cameraAttached"
|
|||
|
|
);
|
|||
|
|
this._playingUnbind = XE.MVVM.bind(this, "playing", path1, "playing");
|
|||
|
|
|
|||
|
|
// 1.1.4 跟踪
|
|||
|
|
// 单向绑定的属性，pin将跟踪path1，但pin发生变化path1并不会跟踪！
|
|||
|
|
// currentPosition 当前相机位置，形式如：[0, 0, 0] 该数组中的元素分别表示经度（单位弧度）、纬度（单位弧度）、高度（单位米）。 注意该属性，为只读属性！
|
|||
|
|
this._pinUnbind = XE.MVVM.track(
|
|||
|
|
pin,
|
|||
|
|
"position",
|
|||
|
|
path1,
|
|||
|
|
"currentPosition"
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
this._earth = earth;
|
|||
|
|
|
|||
|
|
// only for Debug
|
|||
|
|
window.tileset = tileset;
|
|||
|
|
window.path1 = path1;
|
|||
|
|
window.pin = pin;
|
|||
|
|
window.earth = earth;
|
|||
|
|
},
|
|||
|
|
filters: {
|
|||
|
|
numFilter(value) {
|
|||
|
|
// 截取当前数据到小数点后两位
|
|||
|
|
let realVal = parseFloat(value).toFixed(2);
|
|||
|
|
return realVal;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
cameraAttachedClick() {
|
|||
|
|
this.cameraAttached = !this.cameraAttached;
|
|||
|
|
// 飞回原始位置
|
|||
|
|
earth.camera.flyTo(
|
|||
|
|
[1.9017007350831854, 0.5971922118633656, 852.1812706303504],
|
|||
|
|
0,
|
|||
|
|
[1.794120407794253e-13, -0.7863066183499514, 6.283185307179586]
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 1.2 资源销毁
|
|||
|
|
beforeDestroy() {
|
|||
|
|
// vue程序销毁时，需要清理相关资源
|
|||
|
|
this._showUnbind = this._showUnbind && this._showUnbind();
|
|||
|
|
this._currentSpeedUnbind =
|
|||
|
|
this._currentSpeedUnbind && this._currentSpeedUnbind();
|
|||
|
|
this._currentDUnbind = this._currentDUnbind && this._currentDUnbind();
|
|||
|
|
this._pinUnbind = this._pinUnbind && this._pinUnbind();
|
|||
|
|
this._cameraAttachedUnbind =
|
|||
|
|
this._cameraAttachedUnbind && this._cameraAttachedUnbind();
|
|||
|
|
this._playingUnbind = this._playingUnbind && this._playingUnbind();
|
|||
|
|
this._earth = this._earth && this._earth.destroy();
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 2 创建vue程序
|
|||
|
|
// XE.ready()用来加载Cesium.js等相关资源
|
|||
|
|
XE.ready().then(() => {
|
|||
|
|
var app = new Vue({
|
|||
|
|
el: "#vueApp",
|
|||
|
|
components: {
|
|||
|
|
EarthComp,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|