CesiumJS
- CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
-
CesiumJS 官网：https://www.cesium.com/
-
CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/
-
CesiumJS API 文档：https://cesium.com/learn/cesiumjs/ref-doc/index.html
一、监听鼠标左击落点打圆点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ScreenSpaceEventHandler - 监听鼠标左击落点打圆点</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function (click) {// 获取左击位置的射线const pickRay = viewer.camera.getPickRay(click.position);// 在地球表面找到与射线相交的点const pickPosition = viewer.scene.globe.pick(pickRay, viewer.scene);if (Cesium.defined(pickPosition)) {// 如果找到了交点，将其转换为地理弧度坐标（Cartographic）const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(pickPosition);// 这里转换成直观的地理度数坐标console.log("左击落点在地球球面，地理坐标为：", Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude));// 将地理弧度坐标（Cartographic）转换为笛卡尔坐标（Cartesian3）const cartesian3 = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);const entity = viewer.entities.add({position: cartesian3,point: {pixelSize: 10,color: new Cesium.Color(0, 0, 1, 1),},}); } else {console.log("左击落点不在地球球面");}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);</script>
</html>
二、对比 viewer.screenSpaceEventHandler
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ScreenSpaceEventHandler - 对比 viewer.screenSpaceEventHandler</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((click) => {console.log("handler 左击位置为：", click.position.x, click.position.y);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.setInputAction((click) => {console.log("handler 右击位置为：", click.position.x, click.position.y);}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);viewer.screenSpaceEventHandler.setInputAction((click) => {console.log("viewer.screenSpaceEventHandler 左击位置为：", click.position.x, click.position.y);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);viewer.screenSpaceEventHandler.setInputAction((click) => {console.log("viewer.screenSpaceEventHandler 右击位置为：", click.position.x, click.position.y);}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);// new Cesium.ScreenSpaceEventHandler 灵活性高// 对于大多数场景，使用 viewer.screenSpaceEventHandler 已经足够// 对于同样的事件 viewer.screenSpaceEventHandler，优先级更高</script>
</html>
