Cesium Primitive 全面解析与实践(二)「10 分钟掌握 Cesium Primitive」

🚀 个人简介:某大型测绘遥感企业资深Webgis开发工程师,软件设计师(中级)、优快云优质创作者
💟 作 者:柳晓黑胡椒❣️
📝 专 栏:再识Cesium
🌈 若有帮助,还请关注点赞收藏,不行的话我再努努力💪💪💪


本文基于 Cesium 1.132 版本进行演示,其他版本在 API 上可能略有不同。

本文整理了常见的primtive应用,配合示例代码,你可以在实际项目中直接使用或二次封装,提升开发效率。
✨ 欢迎大家在评论区提出建议或交流心得,如果需要完整源码,可以私聊我获取。

一. Primitive 的几何分类是什么

Cesium 的 Primitive 几何(Geometry)大致可以分为以下几类:

  • 体类几何体:Box、Sphere、Cylinder、Ellipsoid 等,用于三维立体建模。
  • 面类几何体:Circle、Ellipse、Rectangle、Polygon 等,用于平面区域绘制。
  • 线类几何体:Polyline、Corridor、PolylineVolume,用于线状或管状表示。
  • 墙体几何体:WallGeometry,用于构建立体边界或围栏。

二. Primitive 的几何类型 Geometry

1. 盒子几何 BoxGeometry

Cesium Primitive创建椭圆时,可借助`EllipseGeometry`来定义椭圆的几何形状,再通过`Primitive`将其添加到场景中。以下是相关参数说明和示例代码。 ### 参数说明 - `center`:椭圆中心。 - `semiMajorAxis`:长半轴。 - `semiMinorAxis`:短半轴。 - `height`:椭圆几何的高度。 - `extrudedHeight`:拉伸高度 [^5]。 ### 示例代码 #### 示例一 ```javascript const primitive = new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.EllipseGeometry({ center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0), semiMinorAxis: 500000.0, semiMajorAxis: 1000000.0, rotation: Cesium.Math.PI_OVER_FOUR, vertexFormat: Cesium.VertexFormat.POSITION_AND_ST }) }), appearance: new Cesium.EllipsoidSurfaceAppearance({ material: Cesium.Material.fromType('Stripe') }) }); viewer.scene.primitives.add(primitive); ``` 此示例创建了一个基本的椭圆图元,设置了椭圆的中心、长短半轴、旋转角度和外观材质 [^1]。 #### 示例 ```javascript const ellipse = new Cesium.EllipseGeometry({ center: Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500), semiMajorAxis: 500.0, semiMinorAxis: 1500.0, height: 300, extrudedHeight: 800 }); ``` 该示例创建了一个可设置拉伸高度的椭圆 [^2]。 #### 示例三 ```javascript const circle = new Cesium.EllipseGeometry({ center: Cesium.Cartesian3.fromDegrees(114.347137, 30.541429), semiMajorAxis: 1500, semiMinorAxis: 500, height: 100, extrudedHeight: 50 }); const geometry = Cesium.EllipseGeometry.createGeometry(circle); const instance = new Cesium.GeometryInstance({ geometry: geometry }); primitiveCollection.add(new Cesium.Primitive({ geometryInstances: instance, asynchronous: false, appearance: new Cesium.MaterialAppearance({ material: new Cesium.Material({ fabric: { type: 'Color', uniforms: { color: Cesium.Color.RED } } }) }) })); viewer.camera.flyToBoundingSphere(geometry.boundingSphere); ``` 这个示例展示了如何创建椭圆几何、实例化并添加到`Primitive`集合中,同时设置了外观材质为红色 [^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值