<!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
id="mouse_state"
style="
position: absolute;
z-index: 9999;
top: 10px;
left: 10px;
background-color: white;
padding: 6px;
"
>
{{showText}}
</div>
</div>
</div>
<script>
let viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {
showText: "暫無鼠標移動信息",
};
},
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.initMouseMoveEvent();
},
//初始化鼠標移動事件
initMouseMoveEvent() {
var _this = this;
let handler = new bmgl.ScreenSpaceEventHandler(
viewer.scene.canvas
);
handler.setInputAction(function (e) {
//得到當前三維場景的橢球體
let ellipsoid = viewer.scene.globe.ellipsoid;
//通過指定的橢球或者地圖對應的坐標系，將鼠標的二維坐標轉換為對應橢球體三維坐標
let ray = viewer.camera.getPickRay(
e.endPosition
);
let cartesian = viewer.scene.globe.pick(
ray,
viewer.scene
);
if (cartesian) {
//將笛卡爾坐標轉換為地理坐標
let cartographic =
ellipsoid.cartesianToCartographic(
cartesian
);
//將弧度轉為度的十進制度表示
longitudeString = bmgl.Math.toDegrees(
cartographic.longitude
).toFixed(7);
latitudeString = bmgl.Math.toDegrees(
cartographic.latitude
).toFixed(7);
//獲取相機高度
height = Math.ceil(
viewer.camera.positionCartographic
.height
).toFixed(2);
_this.showText =
"當前鼠標位置：經度:" +
longitudeString +
", 緯度:" +
latitudeString +
", 高度:" +
height ;
} else {
_this.showText = "暫無鼠標移動信息";
}
}, bmgl.ScreenSpaceEventType.MOUSE_MOVE);
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>