上一节我们学习了:cesium 3D_tiles高级样式设置与条件渲染今天我们要学习的是cesium 移动鼠标获取经纬度。
动态效果
实例代码
// 创建一个div元素用来显示经纬度
this.divDom = document.createElement("div");
// 设置div的样式
this.divDom.style.cssText = `
position: fixed; // 定位方式为固定定位
bottom:0; // 距离屏幕底部为0
right:0; // 距离屏幕右边为0
width:250px; // 宽度为250像素
height:40px; // 高度为40像素
background-color: rgba(0,0,0,0.5); // 背景色为半透明的黑色
color: #fff; // 文字颜色为白色
font-size: 14px; // 字体大小为14像素
line-height: 40px; // 行高为40像素
text-align: center; // 文字居中显示
z-index: 100; // z轴层级为100
`;
// 将这个div添加到网页的body中
document.body.appendChild(this.divDom);
// 使用Cesium的ScreenSpaceEventHandler监听鼠标在viewer.scene.canvas上的移动事件
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 为handler设置输入动作
handler.setInputAction((movement) => {
// 从鼠标移动的结束位置获取对应地图上的坐标
const cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
viewer.scene.globe.ellipsoid
);
if (cartesian) {
// 将获取的坐标转换为经纬度
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
// 获取经度，并将其从弧度转换为度
const longitudeString = Cesium.Math.toDegrees(
cartographic.longitude
).toFixed(4);
// 获取纬度，并将其从弧度转换为度
const latitudeString = Cesium.Math.toDegrees(
cartographic.latitude
).toFixed(4);
// 获取高度
const heightString = cartographic.height;
// 将经纬度显示在div中
this.divDom.innerHTML = `经度：``{longitudeString} 纬度：``{latitudeString} `;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 指定监听的事件类型为鼠标移动
实例里中的方法介绍
Cesium.ScreenSpaceEventHandler 介绍
Cesium.ScreenSpaceEventHandler 是 Cesium 库中用于处理屏幕空间事件（例如鼠标点击、触摸事件等）的一个类。这个类是一个方便的方式，用于在 Cesium 场景中与用户交互。通常，你会创建一个 ScreenSpaceEventHandler 对象，并通过该对象注册不同类型的事件处理函数。
基本使用示例：
// 创建 ScreenSpaceEventHandler 对象并关联到 Cesium 场景
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 注册鼠标左键单击事件
handler.setInputAction(function(clickEvent) {
// clickEvent.position 会包含鼠标点击的屏幕坐标
// 在这里执行你的代码
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
上面的代码会创建一个新的 ScreenSpaceEventHandler 实例，并为鼠标左键单击事件注册一个处理函数。
事件类型包括但不限于：
Cesium.ScreenSpaceEventType.LEFT_CLICK：左键单击Cesium.ScreenSpaceEventType.RIGHT_CLICK：右键单击Cesium.ScreenSpaceEventType.MOUSE_MOVE：鼠标移动Cesium.ScreenSpaceEventType.WHEEL：滚轮滚动Cesium.ScreenSpaceEventType.PINCH_START：触摸设备上的捏合开始Cesium.ScreenSpaceEventType.PINCH_END：触摸设备上的捏合结束
要注销事件处理，你可以调用 removeInputAction 方法：
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
这样，与该事件相关联的处理函数就会被移除。
ScreenSpaceEventHandler 是处理 Cesium 中基础交互的重要工具，通过它你可以自定义各种用户交互逻辑。
Cesium.Cartographic.fromCartesian
Cesium.Cartographic.fromCartesian 是 Cesium 库中用于将笛卡尔坐标（Cartesian coordinates）转换为地理坐标（Cartographic coordinates）的一个静态方法。地理坐标通常表示为经度、纬度和高度，而笛卡尔坐标则是一个三维空间中的点。
这个方法通常用于将 Cesium 世界中的一个点（通常为一个 Cesium.Cartesian3 对象）转换为其对应的地理位置。
基本用法如下：
var cartesianCoordinate = new Cesium.Cartesian3(x, y, z);
// 将笛卡尔坐标转换为地理坐标
var cartographicCoordinate = Cesium.Cartographic.fromCartesian(cartesianCoordinate);
// 获取经度、纬度（以弧度为单位）和高度（以米为单位）
var longitude = cartographicCoordinate.longitude;
var latitude = cartographicCoordinate.latitude;
var height = cartographicCoordinate.height;
这里的 x, y, z 是笛卡尔坐标的 x、y 和 z 组件。
注意：
- 返回的
Cesium.Cartographic对象中的经度和纬度是以弧度为单位的。 - 如果你想将这些转换为度数，你可以使用 Cesium 的
Cesium.Math.toDegrees方法。
示例：
var degreesLongitude = Cesium.Math.toDegrees(cartographicCoordinate.longitude);
var degreesLatitude = Cesium.Math.toDegrees(cartographicCoordinate.latitude);
Cesium.Cartographic.fromCartesian 方法对于需要地理位置信息的应用场景非常有用，例如标记选点、地理查询、距离计算等。通过它，你可以很容易地从 Cesium 的三维世界中提取有用的地理信息。
Cesium.Math.toDegrees
Cesium.Math.toDegrees 是 Cesium 库中用于将角度从弧度（radian）转换为度（degree）的一个静态方法。这个函数在你需要用度数来解读或显示角度值时非常有用，特别是在与地理坐标（经度、纬度）交互时。
基本用法如下：
var angleInRadians = Math.PI; // 180度的弧度表示形式
var angleInDegrees = Cesium.Math.toDegrees(angleInRadians); // 将其转换为度
在这个例子中，angleInDegrees 的值将会是 180。
这个方法常常用于与 Cesium.Cartographic.fromCartesian 结合使用，以将笛卡尔坐标转换成更容易理解和展示的地理坐标（经度、纬度）。例如：
var cartesianCoordinate = new Cesium.Cartesian3(x, y, z);
var cartographicCoordinate = Cesium.Cartographic.fromCartesian(cartesianCoordinate);
// 使用 toDegrees 将弧度转换为度
var degreesLongitude = Cesium.Math.toDegrees(cartographicCoordinate.longitude);
var degreesLatitude = Cesium.Math.toDegrees(cartographicCoordinate.latitude);
通过这样的转换，你可以更方便地将 Cesium 中的地理信息与其他使用度数的系统或库进行集成。同时，度数形式的地理坐标通常也更方便人们阅读和理解。
实例演示地址
当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-cesium 制作获取地图经纬度插件-实践的学习笔记
实例代码下载
代码运行环境：vue3 + vite + js nodejs 14
