<!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: 400px;
height: 400px;
display: flex;
/* align-items: center; */
flex-direction: column;
justify-content: left;
}
</style>
</head>
<body>
<div id="app">
<div class="tools">
<el-button
type="success"
size="mini"
style="width: 200px; margin-bottom: 4px"
@click="getNowPos"
>獲取當前鏡頭位置</el-button
>
<el-input
type="textarea"
:rows="8"
placeholder="點擊獲取當前鏡頭位置按鈕可展示鏡頭的相關數據"
v-model="textarea"
style="width: 320px;"
>
</el-input>
</div>
<div id="baseMap"></div>
</div>
<script>
let viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {
textarea: "",
};
},
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,
});
},
getNowPos() {
let view = {};
let p = bmgl.Cartographic.fromCartesian(
viewer.camera.position
);
view.destination = {
lng: bmgl.Math.toDegrees(p.longitude),
lat: bmgl.Math.toDegrees(p.latitude),
height: p.height,
};
view.orientation = {
heading: viewer.camera.heading,
roll: viewer.camera.roll,
pitch: viewer.camera.pitch,
};
console.log(view);
this.textarea = "";
this.textarea =
`鏡頭經緯度數據` + `\n` +
` 經度:${view.destination.lng}` +
`\n` +
` 緯度:${view.destination.lat}` +
`\n` +
` 高度:${view.destination.height}` +
`\n` +
` heading(偏航角):${view.orientation.heading}` +
`\n` +
` pitch(俯仰角):${view.orientation.pitch}` +
`\n` +
` roll(翻滾角):${view.orientation.roll}`;
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>