<template>
<div id="cesiumContainer" ref="cesiumContainer"></div>
<div id="mousePosition"></div>
</template>
<script>
import * as mars3d from 'mars3d'
export default {
data() {
return {
map: null, // 地图数据
mousePositionElement: null // 坐标数据
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
// 创建三维地球场景
const mapOptions = {}
this.map = new mars3d.Map('cesiumContainer', mapOptions)
// 获取鼠标位置显示元素
this.mousePositionElement = document.getElementById('mousePosition')
// 监听鼠标移动事件
this.map.on(mars3d.EventType.mouseMove, this.showMouseCoordinates)
},
showMouseCoordinates(event) {
// 获取鼠标在屏幕上的位置
const windowPosition = event.endPosition
// 转换为笛卡尔空间直角坐标
const cartesian3 = mars3d.PointUtil.getCurrentMousePosition(this.map.scene, windowPosition)
// 将笛卡尔坐标转换为地理坐标(经纬度)
const position = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3)
// 将坐标格式化为字符串
const lng = Cesium.Math.toDegrees(position.longitude).toFixed(6)
const lat = Cesium.Math.toDegrees(position.latitude).toFixed(6)
const height = position.height.toFixed(2)
// 更新鼠标位置显示元素的内容
this.mousePositionElement.textContent = `经度:${lng}° 纬度:${lat}° 高程:${height}米`
}
}
}
</script>
<style scoped>
#mousePosition {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
border-radius: 3px;
font-size: 14px;
z-index: 1000;
}
</style>
mars3d 鼠标移动地图显示坐标参数
于 2024-01-26 14:36:50 首次发布