<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/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="/offline_data/newjunbiao/elementui.js"></script>
<link rel="stylesheet" href="/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;
justify-content: right;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
<div class="tools">
<el-button type="success" size="small" @click="restartFly"
>重新開始飛行</el-button
>
<el-button type="danger" size="small" @click="pauseFly"
>停止鏡頭飛行</el-button
>
</div>
</div>
<script>
window.viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
//設置相機鏡頭默認位置
bmgl.Camera.DEFAULT_VIEW_RECTANGLE =
bmgl.Rectangle.fromDegrees(
-141.006,
83.117,
-52.617,
41.669
);
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,
});
this.openFlyAnimation();
},
//開場動畫
openFlyAnimation() {
viewer.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(
104.5,
30,
200000
),
orientation: {
heading: 0,
pitch: bmgl.Math.toRadians(-60),
roll: 0,
},
//設置飛行動畫時間
duration: 6.0,
//飛行完成后的回調函數
complete: () => {
console.log("飛行完成");
},
//停止飛行的回調函數
cancel: () => {
console.log("飛行停止");
},
});
},
pauseFly() {
//如果飛行正在進行，取消當前的鏡頭飛行。鏡頭留在當前位置
viewer.camera.cancelFlight();
},
restartFly() {
//返回默認視角
viewer.camera.flyHome(0);
this.openFlyAnimation();
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>