问题:点击Cesium地图时获取当前点击位置的经纬度
解决过程:
1.添加用户输入监听范围handlePoint
2.new Cesium.ScreenSpaceEventHandler ( element )处理用户输入事件
3.window.cesium.viewer.scene.canvas是要为其创建场景的 HTML 画布元素
4.setInputAction (action, type, modifier )设置要在输入事件上执行的功能
5.setInputAction中action是当输入事件发生时要执行的函数
6.ScreenSpaceEventType 此枚举类型用于对鼠标事件进行分类:向下、向上、单击、双击、移动和按住按钮时移动等
7.Cesium.ScreenSpaceEventType.LEFT_CLICK表示鼠标左键单击事件
8.使用setTimeout函数创建的延迟计时器,避免连续点击重复获取同一个点的坐标,声明一个变量time来保存计时器的ID,并将其ID保存在变量time中
9.调用clearTimeout函数并传入之前保存的计时器ID可以停止计时器,避免不必要的资源消耗
10.使用cesium.viewer.scene.pickPosition执行拾取的窗口坐标
11.Cesium.Cartographic.fromCartesian从笛卡尔位置创建一个新的制图实例,转换为制图表示的笛卡尔位置,结果对象中的值将以弧度表示
12.拿到弧度后,使用Cesium.Math.toDegrees将弧度转为度数
13.removeInputAction是删除要在输入事件上执行的函数
14.最后返回所需要的经纬度值,获取到当前点击位置的经纬度
15.setInputAction要在onMounted组件挂载完成后进行,removeInputAction要在组件注销之前执行
解决结果:
import { onMounted, onUnmounted} from 'vue'
const getCartesianCoordinate = (pos) => {
let cartesianCoordinate = window.cesium.viewer.scene.pickPosition(pos)
if(!cartesianCoordinate){
return null
}
let cartographic = Cesium.Cartographic.fromCartesian(cartesianCoordinate);
let longitude = Cesium.Math.toDegrees(cartographic.longitude);
let latitude = Cesium.Math.toDegrees(cartographic.latitude);
let height = cartographic.height;
let position = {
longitude: Number(longitude.toFixed(6)),
latitude: Number(latitude.toFixed(6)),
altitude: Number(height.toFixed(2))
};
return position
}
onMounted(() => {
let handlePoint = new Cesium.ScreenSpaceEventHandler(window.cesium.viewer.scene.canvas);
handlePoint.setInputAction(function (event) {
// 避免双击重复获取点
let time = null
clearTimeout(timer)
time = window.setTimeout(function () {
// 单击获取坐标点
let coordinate = getCartesianCoordinate(event.position)
console.log('坐标',coordinate)
// {
// "longitude": 111.634259,
// "latitude": 44.577749,
// "altitude": 1237.97
// }
}, 200);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
})
onUnmounted(() => {
handlePoint.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
})