cesium绘制圆

在 Cesium 中绘制圆形几何图形可以通过创建自定义的 `Entity` 或者使用 `Primitive` 来实现。以下是基于常见实践和 Cesium 官方文档的方法，帮助你完成绘制圆形的功能。 ### 使用 Entity API 绘制圆形 Cesium 提供了 `Entity` 类来简化几何图形的绘制工作。可以使用 `Polygon` 实体来绘制一个圆形。通过指定中心点、半径以及边数来近似表示圆形。 ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); // 圆心坐标（经纬度） const center = Cesium.Cartesian3.fromDegrees(-115.0, 37.0); // 半径 const radius = 100000.0; // 创建圆形多边形实体 viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy(center), material: Cesium.Color.RED.withAlpha(0.5), // 使用圆形近似函数 outline: true, outlineColor: Cesium.Color.BLACK } }); // 设置相机视角到圆心区域 viewer.camera.flyTo({ destination: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90) }); ``` 为了精确地绘制圆形，可以使用 `Cesium.EllipseGeometry` 或 `Cesium.CircleGeometry`： ```javascript function createCircle(centerCartesian, radius) { const circle = Cesium.CircleGeometry.computePositionsWithHeights( centerCartesian, Cesium.Ellipsoid.WGS84, radius, 60 // 边数，值越大越接近圆形 ); return circle; } const positions = createCircle(center, radius); viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy(positions), material: Cesium.Color.BLUE.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.DARKBLUE } }); ``` ### 使用 Primitive API 绘制圆形 如果你希望更高效地处理大量图形或进行低级控制，可以使用 `Primitive` API。 ```javascript const scene = viewer.scene; const circlePrimitive = scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.CircleGeometry({ center: center, radius: radius, vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL }) }), appearance: new Cesium.MaterialAppearance({ material: Cesium.Material.fromType('Color', { color: Cesium.Color.YELLOW }) }) })); ``` ### 动态交互式绘制圆形 如果需要用户动态点击地图绘制圆形，可以结合 `ScreenSpaceEventHandler` 和鼠标事件： ```javascript let drawing = false; let startMousePosition; let endMousePosition; const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction((movement) => { if (!drawing) return; endMousePosition = movement.endPosition; }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); handler.setInputAction(() => { drawing = true; startMousePosition = handler.getMovement().position; }, Cesium.ScreenSpaceEventType.LEFT_DOWN); handler.setInputAction(() => { drawing = false; const startCartesian = viewer.camera.pickEllipsoid(startMousePosition); const endCartesian = viewer.camera.pickEllipsoid(endMousePosition); if (startCartesian && endCartesian) { const radius = Cesium.Cartesian3.distance(startCartesian, endCartesian); const positions = createCircle(startCartesian, radius); viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy(positions), material: Cesium.Color.GREEN.withAlpha(0.5), outline: true } }); } }, Cesium.ScreenSpaceEventType.LEFT_UP); ``` ### 总结 - **Entity API** 更适合快速开发和交互操作。 - **Primitive API** 更适合高性能需求或批量渲染场景。 - 可以结合 `ScreenSpaceEventHandler` 实现动态交互式绘图功能。