<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<!-- elementui -->
<script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
<link
rel="stylesheet"
href="http://bigemap.com/offline_data/newjunbiao/elementui.css"
/>
<title>相機鏡頭按照步驟運動</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
#baseMap {
width: 100%;
height: 100%;
}
.tools {
position: absolute;
z-index: 9;
top: 40px;
right: 60px;
width: 200px;
height: 40px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
bmgl.Config.HTTP_URL =
"http://ua.bigemap.com:30081/bmsdk/";
viewer = new bmgl.Viewer("baseMap", {
mapId: "bigemap.dc-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
102,
30,
10000
),
});
setTimeout(() => {
this.stepFly(viewer, {
// 目的地經度
lon: 104,
// 目的地緯度
lat: 30,
// 目的地的鏡頭高度
height: 23000,
// 目的地的鏡頭旋轉角度
orientation: {
heading: bmgl.Math.toRadians(90),
roll: 0,
pitch: 0,
},
});
},4000);
},
RetuendefaultValue(a, b) {
if (a !== undefined && a !== null) {
return a;
}
return b;
},
//按步驟調整飛行位置
stepFly(viewer, options) {
const { camera } = viewer;
const step1 = this.RetuendefaultValue(
options.firstDuration,
3
);
const step2 = this.RetuendefaultValue(
options.secondDuration,
3
);
const step3 = this.RetuendefaultValue(
options.thirdDuration,
3
);
const cartographic = options.destination;
// 第一步調整鏡頭位置
const cur_height =
viewer.camera._positionCartographic.height;
const firstStep = bmgl.Cartesian3.fromDegrees(
options.lon,
options.lat,
cur_height
);
// 第二步調整鏡頭高度
const secondStep = bmgl.Cartesian3.fromDegrees(
options.lon,
options.lat,
options.height
);
return new Promise((resolve) => {
camera.flyTo({
destination: firstStep,
duration: step1,
complete() {
camera.flyTo({
destination: secondStep,
duration: step2,
complete() {
camera.flyTo({
destination: secondStep,
orientation:
options.orientation,
duration: step3,
complete() {
resolve();
},
});
},
});
},
});
});
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>