<!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-tian-w-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
this.pointRotate();
},
// 繞點旋轉
pointRotate() {
let options = {
lng: 117.1423291616,
lat: 39.0645831633,
height: 15.8,
heading: 0.0,
pitch: 0.0,
roll: 0.0,
};
let pinBuilder = new bmgl.PinBuilder();
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(
options.lng,
options.lat
),
model:{
uri:"/offline_data/towerTowloop.glb",
scale:30,
}
});
// viewer.zoomTo(viewer.entities)
let position = bmgl.Cartesian3.fromDegrees(
options.lng,
options.lat,
options.height
);
// 相機看點的角度，如果大于0那么則是從地底往上看，所以要為負值，這里取-30度
let pitch = bmgl.Math.toRadians(-30);
// 給定飛行一周所需時間，比如10s, 那么每秒轉動度數
let angle = 360 / 30;
// 給定相機距離點多少距離飛行，這里取值為5000m
let distance = 5000;
let startTime = bmgl.JulianDate.fromDate(
new Date()
);
viewer.clock.startTime = startTime.clone(); // 開始時間
viewer.clock.currentTime = startTime.clone(); // 當前時間
viewer.clock.clockRange = bmgl.ClockRange.CLAMPED; // 行為方式
viewer.clock.clockStep = bmgl.ClockStep.SYSTEM_CLOCK; // 時鐘設置為當前系統時間; 忽略所有其他設置。
// 相機的當前heading
let initialHeading = viewer.camera.heading;
let Exection = function TimeExecution() {
// 當前已經過去的時間，單位s
let delTime = bmgl.JulianDate.secondsDifference(
viewer.clock.currentTime,
viewer.clock.startTime
);
let heading =
bmgl.Math.toRadians(delTime * angle) +
initialHeading;
viewer.scene.camera.setView({
destination: position, // 點的坐標
orientation: {
heading: heading,
pitch: pitch,
},
});
viewer.scene.camera.moveBackward(distance);
};
viewer.clock.onTick.addEventListener(Exection);
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>