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>