cesium 画框截图

### 实现 Cesium 中绘制矩形并截屏 #### 移除默认交互行为 为了防止双击事件触发不必要的操作，移除默认的左键双击事件处理程序： ```javascript viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); ``` #### 初始化绘图工具 创建用于监听屏幕空间事件的对象，并设置相应的输入动作来响应用户的鼠标点击和移动事件。 ```javascript let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); // 存储多边形顶点位置数组 let positions = []; handler.setInputAction(function(event) { // 左键单击添加新点到positions列表中 }, Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(function(event) { // 鼠标移动时更新提示信息或其他UI组件状态 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); ``` #### 完整的矩形绘制功能 当用户完成四个角点的选择后形成闭合路径，则可以构建一个多边形实体表示该矩形区域。下面是一个完整的例子展示如何捕捉这四个点以及最终渲染出矩形框[^3]。 ```javascript function startDrawRectangle() { const viewer = window.viewer; let drawingPositions = []; let rectangleEntity; function addPosition(cartesian) { if (drawingPositions.length === 4) return false; drawingPositions.push(cartesian); updateDrawing(); if (drawingPositions.length >= 2 && !rectangleEntity) { createRectangleFromPoints(drawingPositions[drawingPositions.length - 2], cartesian); } return true; } function createRectangleFromPoints(start, end) { var west = Math.min(start.longitude, end.longitude), south = Math.min(start.latitude, end.latitude), east = Math.max(start.longitude, end.longitude), north = Math.max(start.latitude, end.latitude); rectangleEntity = viewer.entities.add({ name : 'Rectangle', rectangle : { coordinates : Cesium.Rectangle.fromDegrees(west, south, east, north), material : Cesium.Color.BLUE.withAlpha(0.5) } }); viewer.flyTo(rectangleEntity); } function finishDrawing() { handler.destroy(); // 销毁事件处理器 // 渲染完成后可执行其他操作... } function updateDrawing() {} handler.setInputAction((movement) => { const pickedObject = viewer.scene.pick(movement.position); if (!Cesium.defined(pickedObject)) { const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid); if (addPosition(cartesian)) { console.log('Added position:', Cesium.Cartographic.toDegrees(Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian))); } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(() => {}, Cesium.ScreenSpaceEventType.RIGHT_CLICK); // 右键结束绘制 } ``` #### 截取视口图像 一旦完成了矩形的绘制，可以通过调用 `canvas` 的方法获取当前场景的画面作为图片数据保存下来或分享出去。 ```javascript async function captureScreenshot() { try { const imageBlob = await viewer.baseLayerPicker.viewModel.imageryLayers.layerCollection._layers[0].imageryProvider.resource.fetchImageAsBlob(); const imageUrl = URL.createObjectURL(imageBlob); const link = document.createElement('a'); link.href = imageUrl; link.download = "cesium_screenshot.png"; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(imageUrl); } catch(error){ console.error("Failed to take screenshot", error); } } ```