- 鼠标点击事件通过
LEFT_CLICK类型监听，使用drillPick方法获取点击的对象并打印其名称。 - 鼠标移动事件通过
MOUSE_MOVE类型监听，使用pickEllipsoid方法获取鼠标位置对应的经纬度并打印。 - 鼠标滚轮事件通过
WHEEL类型监听，通过调整相机的高度来实现缩放效果。
const viewerDivRef = ref<HTMLDivElement>() // 初始化Cesium Viewer viewer = new Cesium.Viewer(cesiumContainer.value, { timeline: true, animation: true, shouldAnimate: true, homeButton: false, // 是否显示Home按钮 fullscreenButton: false, // 是否显示全屏按钮 baseLayerPicker: true, // 是否显示图层选择控件 geocoder: false, // 是否显示地名查找控件 sceneModePicker: false, // 是否显示投影方式控件 navigationHelpButton: false, // 是否显示帮助信息控件 infoBox: false, // 是否显示点击要素之后显示的信息 requestRenderMode: true, // 启用请求渲染模式 scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存 sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode }); // 鼠标点击事件 viewer.screenSpaceEventHandler.setInputAction((movement) => { const pickedObjects = viewer.scene.drillPick(movement.position); if (pickedObjects.length > 0) { const pickedObject = pickedObjects[0]; console.log('点击了:', pickedObject.name); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 鼠标移动事件 viewer.screenSpaceEventHandler.setInputAction((movement) => { const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid); if (cartesian) { const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const longitude = Cesium.Math.toDegrees(cartographic.longitude); const latitude = Cesium.Math.toDegrees(cartographic.latitude); console.log('鼠标移动到经纬度:', longitude, latitude); } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 鼠标滚轮事件 viewer.screenSpaceEventHandler.setInputAction((wheel) => { const camera = viewer.camera; const distance = camera.positionCartographic.height; const newDistance = distance * (1 - wheel.delta * 0.1); camera.setView({ destination: Cesium.Cartesian3.fromRadians(camera.positionCartographic.longitude, camera.positionCartographic.latitude, newDistance) }); }, Cesium.ScreenSpaceEventType.WHEEL); // 强制刷新场景 try { if (viewer && viewer.scene) { viewer.scene.requestRender() setTimeout(() => { if (viewer && viewer.scene) { viewer.scene.requestRender() } }, 0) } } catch (e) { console.warn('刷新场景时出错:', e) } }
