cesium 三维cesium-measure.js

Cesium是一个基于WebGL的开源虚拟地球仪，它提供了丰富的三维空间测量功能。在Cesium中，三维空间测量可以分为空间距离/面积和表面距离/面积两种方式进行。其中，空间距离/面积测量是指在三维空间中直接测量两点之间的距离或者某个区域的面积，而表面距离/面积测量则需要考虑地形的高低起伏以及加载模型的在模型表面的测量情况。在Cesium中，可以通过引入cesium-measure.js文件并使用其中的三维量测插件来实现空间距离/面积和三角量测，同时也可以通过依地形量算或依模型表面量算的方式来实现表面距离量算。

### Cesium 绘制功能实现方式 在 Cesium 中实现绘制功能，通常可以通过使用 `Cesium.Entity` 或者自定义的工具库（如 cesium-measure.js）来完成。以下是详细的实现方式： #### 1. 使用 Cesium.Entity 实现绘制 Cesium 提供了内置的 `Entity` 类型，可以用来绘制各种图形元素，例如点、线、多边形、矩形等。以下是一些常见的绘制示例： - **绘制点**： ```javascript viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222), point: { pixelSize: 10, color: Cesium.Color.RED } }); ``` - **绘制线**： ```javascript viewer.entities.add({ polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ -75.1641667, 39.9522222, -75.5341667, 39.1222222 ]), width: 5, material: Cesium.Color.BLUE } }); ``` - **绘制多边形**： ```javascript viewer.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ -75.1641667, 39.9522222, -75.5341667, 39.1222222, -76.1641667, 39.9522222 ]), material: Cesium.Color.GREEN.withAlpha(0.5) } }); ``` - **绘制矩形**： ```javascript viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( -75.0, 38.0, -70.0, 40.0 ), material: Cesium.Color.YELLOW.withAlpha(0.5) } }); ``` 这些方法可以直接通过 `viewer.entities.add()` 方法添加到场景中[^2]。 #### 2. 使用 cesium-measure.js 实现绘制与测量 如果需要更复杂的绘制和测量功能，可以使用 cesium-measure.js 这样的第三方工具库。cesium-measure.js 将常见的绘制功能（如线、多边形、圆形、矩形）和测量功能（如距离、面积、三角测量）封装为一个统一的工具[^1]。 - **初始化 cesium-measure.js**： ```javascript const measure = new CesiumMeasure(viewer, { toolbarPosition: 'bottom-right', // 工具栏位置 defaultColor: Cesium.Color.RED // 默认颜色 }); ``` - **调用绘制功能**： ```javascript measure.startDraw('line'); // 开始绘制线 measure.startDraw('polygon'); // 开始绘制多边形 measure.startDraw('circle'); // 开始绘制圆形 ``` - **获取测量结果**： ```javascript measure.on('measure_end', (result) => { console.log(result); // 输出测量结果 }); ``` cesium-measure.js 的优势在于它提供了直观的用户界面和事件监听机制，适合快速开发和集成。 #### 3. 自定义绘制功能 如果内置功能无法满足需求，可以通过监听鼠标事件和拾取功能来自定义绘制逻辑。以下是一个简单的自定义绘制线的示例： ```javascript let positions = []; let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction((movement) => { const cartesian = viewer.scene.pickPosition(movement.position); if (Cesium.defined(cartesian)) { positions.push(cartesian); updateGraphics(); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); function updateGraphics() { viewer.entities.removeAll(); if (positions.length > 1) { viewer.entities.add({ polyline: { positions: positions, width: 5, material: Cesium.Color.BLUE } }); } } ``` 此代码片段展示了如何通过监听鼠标点击事件动态生成线段，并实时更新场景中的图形[^2]。 #### 4. 解决常见问题 - **切换二维地图**：可以通过设置 `sceneMode` 属性实现[^3]。 ```javascript viewer.scene.mode = Cesium.SceneMode.SCENE2D; ``` - **删除默认图层**：可以使用 `viewer.imageryLayers.removeAll()` 方法清除默认图层[^3]。 - **隐藏版权信息**：通过修改 `_creditContainer` 样式隐藏版权信息[^3]。 ```javascript viewer._cesiumWidget._creditContainer.style.display = "none"; ``` - **旋转矩形中心点问题**：如果需要指定旋转中心点，可以手动计算矩形顶点坐标并调整其位置[^4]。 --- ###