Cesium学习笔记(一) : 使用Cesium.Primitive 的使用。

1. Cesium学习笔记(一) : 使用Cesium.Primitive 的使用

我们以创建一个矩形为例

  1. primivite创建矩形
let rectGeometry2 = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      115,
      20,
      135,
      30
    ),
    // 挤出高度
    height: 50, // 物体表面的高度
    vertexFormat: Cesium.PreInstanceColorAppearance.VERTEX_FORMAT
  })

创建集合体实例

let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry2,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))
    }
  })

创建图元

let primivite = new Cesium.Primitive({
    geometryInstances: instance,
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true
    })
    // appearance 设置外观
  })

将图元添加到创建中

viewer.scene.primitives.add(primivite)
<think>好的,我现在需要帮助用户在他们使用Cesium库创建的圆形几何体上添加外边框。首先,我要理解他们现有的代码结构。他们创建了个CircleGeometry,然后生成geometry,接着用GeometryInstance和Primitive添加到场景中,并设置了MaterialAppearance来显示颜色。 用户的需求是给这个圆形添加外边框。在Cesium中,边框通常可以通过线几何体来实现。所以,我需要考虑如何在线几何体中创建圆的轮廓,并确保其与现有的圆形Primitive起显示。 首先,现有的圆形是使用CircleGeometry创建的,而外边框应该是个线状的圆环。Cesium提供了EllipseGeometry,可以用于创建椭圆或圆形,当设置合适的参数时,可以作为线几何体使用。不过,CircleGeometry本身可能更适合,但需要确认是否支持线框模式。 不过,CesiumPrimitive和GeometryInstance通常用于填充几何体,而线条可能需要使用不同的方法。可能更合适的方式是创建个PolylineGeometry来绘制圆的边界。因为PolylineGeometry可以定义线段的路径,但圆的路径需要计算系列的点来构成多边形。 另个思路是,使用EllipseOutlineGeometry,它专门用于创建椭圆或圆形的轮廓线。这个几何体可以生成线条,而不是填充的面。因此,用户可能需要创建个EllipseOutlineGeometry实例,然后将其作为另个GeometryInstance添加到同个或不同的Primitive中。 不过,在现有代码中,用户已经创建了Primitive来显示填充的圆形。为了添加边框,可能需要创建第二个Primitive,专门用于绘制线条。这样,两个Primitive可以叠加显示,个填充颜色,另个显示边框。 接下来,需要确定EllipseOutlineGeometry的参数。例如,中心点、半径、分段数等应该与原有的CircleGeometry致。然后,创建对应的GeometryInstance和Primitive,并设置其外观为PolylineMaterialAppearance,使用合适的材质和宽度。 此外,需要注意高度的问题。原来的圆形可能是在地面上,而线条的高度应该与之匹配,否则可能会出现线条在填充区域上方或下方的情况。需要确保EllipseOutlineGeometry的参数中的高度设置正确,或者使用相同的中心点坐标。 然后,在材质方面,边框可能需要使用不同的颜色,比如用户指定的颜色,但透明度较低或者不透明。例如,原填充颜色用了0.5的alpha,边框可能用相同的颜色但alpha为1,或者更深的颜色。 另外,线宽的问题需要注意。在WebGL中,线宽的支持可能有限,通常只有1像素的宽度可靠。但Cesium的PolylineMaterialAppearance允许通过设置width属性来调整线宽,尽管实际效果可能受浏览器限制。 现在,整合这些思路,代码的大致步骤应该是: 1. 使用EllipseOutlineGeometry创建边框的几何体,参数与原来的CircleGeometry致,比如相同的中心点、半径、分段数。 2. 创建对应的GeometryInstance,将EllipseOutlineGeometry转换为geometry。 3. 创建第二个Primitive使用PolylineMaterialAppearance,并设置颜色和线宽。 4. 将这个新的Primitive添加到viewer.scene.primitives中,确保它在填充圆形的同层级或适当的位置显示。 现在,检查用户原来的代码中的参数。原来的CircleGeometry的参数包括radius: 1000,单位是米,中心点由经纬度转换而来。EllipseOutlineGeometry需要半长轴和半短轴,这里都是半径,所以设置semiMajorAxis和semiMinorAxis都为1000。此外,EllipseOutlineGeometry可能需要指定椭圆的旋转角度(这里为0),以及分段数segments:32,与原来的圆致。 然后,创建EllipseOutlineGeometry的实例,调用createGeometry方法生成geometry。接着,创建GeometryInstance和Primitive使用PolylineMaterialAppearance,并设置material为Color类型,颜色为边框颜色,线宽设为2或其他值。 需要注意的是,EllipseOutlineGeometry可能需要不同的参数结构,比如中心点使用Cartesian3,半径使用semiMajorAxis和semiMinorAxis。例如: var outlineGeometry = new Cesium.EllipseOutlineGeometry({ center: center, semiMajorAxis: 1000, semiMinorAxis: 1000, rotation: 0, numberOfVerticalLines: 0, // 不需要垂直线 height: 0, extrudedHeight: 0, ellipsoid: Cesium.Ellipsoid.WGS84, granularity: Cesium.Math.RADIANS_PER_DEGREE // 或者计算合适的粒度 }); 不过,可能需要更仔细地查阅Cesium的文档,确认EllipseOutlineGeometry的参数。例如,是否可以直接使用radius参数?或者必须用semiMajorAxis和semiMinorAxis。对于圆形,这两个参数应该相等,所以设为相同的值。 另外,原来的CircleGeometry可能内部也是基于EllipseGeometry,所以EllipseOutlineGeometry应该适用。 然后,创建线条的Primitive: const outlineInstance = new Cesium.GeometryInstance({ geometry: outlineGeometry, }); this.DJXFCricleOutline = viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: outlineInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: new Cesium.Material({ fabric: { type: 'Color', uniforms: { color: borderColor } } }), polylineHierarchy: new Cesium.PolylineHierarchy(positions), // 不确定是否需要 width: 2 }) })); 不过,PolylineMaterialAppearance可能需要正确配置。或者,可能更适合使用PolylineGeometry和PolylineCollection来添加线条,但使用Primitive和GeometryInstance的方法也是可行的。 另外,可能需要调整appearance的renderState,确保线条在填充之后绘制,避免被遮挡。例如,设置depthTest: { enabled: false },但这可能影响其他元素的深度测试,需谨慎。 总结,关键步骤是创建EllipseOutlineGeometry,生成对应的geometry实例,并添加到Primitive中,使用PolylineMaterialAppearance设置边框颜色和线宽。然后,将新的Primitive添加到场景中。 现在,将这些步骤转化为代码,补充到用户现有的代码中。例如,在创建填充圆形的代码之后,创建边框的Geometry和Primitive: // 创建边框的几何体 var outlineGeometry = new Cesium.EllipseOutlineGeometry({ center: Cesium.Cartesian3.fromDegrees(lng, lat), semiMajorAxis: 1000, semiMinorAxis: 1000, rotation: 0, height: 0, extrudedHeight: 0, numberOfVerticalLines: 0, // 圆形不需要垂直的线条 granularity: Cesium.Math.RADIANS_PER_DEGREE // 控制精度 }); var outlineGeometryInstance = new Cesium.GeometryInstance({ geometry: Cesium.EllipseOutlineGeometry.createGeometry(outlineGeometry), }); // 创建边框的Primitive this.DJXFCricleOutline = this.viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: outlineGeometryInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType('Color', { color: Cesium.Color.fromCssColorString(borderColor).withAlpha(1) // 假设边框颜色 }), polylineHierarchy: new Cesium.PolylineHierarchy(), // 可能需要调整 width: 2 // 线宽 }) })); 但需要确认PolylineMaterialAppearance的参数是否正确。或者,可能需要使用其他appearance类型,比如PolylineColorAppearance,但通常PolylineMaterialAppearance更灵活。 此外,可能需要设置renderState来确保线条正确显示。例如,在appearance中设置: appearance: new Cesium.PolylineMaterialAppearance({ material: ..., translucent: true, renderState: { depthTest: { enabled: false // 根据需要调整 }, lineWidth: 2 // 可能无效,因为WebGL限制 } }) 但WebGL的线宽支持有限,可能实际线宽只能是1,不管设置多少。因此,用户可能需要接受线宽无法改变,或者采用其他方法,比如使用几何体扩展的方法来生成更宽的线。 另个可能的替代方案是使用GroundPrimitive或者其他的图元类型,但可能复杂。 综上,正确的代码应该是在现有的基础上添加个EllipseOutlineGeometry的Primitive使用合适的颜色和线宽。需要确保EllipseOutlineGeometry的参数正确,特别是中心点和半径与原来的圆致。此外,可能需要处理边框的颜色和透明度,确保与填充区域区分开。</think><< 要为圆形添加外边框,需要使用`EllipseOutlineGeometry`创建线框几何体,并通过独立的Primitive进行渲染。以下是实现代码: ```javascript // 创建圆形填充部分(原有代码) var circle = new Cesium.CircleGeometry({ center: Cesium.Cartesian3.fromDegrees(lng, lat), radius: 1000, segments: 32, extrudedHeight: 0, perPositionHeight: false }); var geometry = Cesium.CircleGeometry.createGeometry(circle); // 创建边框几何体 var outlineGeometry = new Cesium.EllipseOutlineGeometry({ center: Cesium.Cartesian3.fromDegrees(lng, lat), semiMajorAxis: 1000, semiMinorAxis: 1000, rotation: 0, height: 0, numberOfVerticalLines: 0 }); var outlineGeometryInstance = new Cesium.GeometryInstance({ geometry: Cesium.EllipseOutlineGeometry.createGeometry(outlineGeometry) }); // 添加填充图形 this.DJXFCricle = this.viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: geometry }), appearance: new Cesium.MaterialAppearance({ material: new Cesium.Material({ fabric: { type: "Color", uniforms: { color: Cesium.Color.fromCssColorString(color).withAlpha(0.5) } } }) }) })); // 添加边框图形 this.DJXFCricleOutline = this.viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: outlineGeometryInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType("Color", { color: Cesium.Color.fromCssColorString(color).withAlpha(1) }), translucent: true, polylineWidth: 2 }), asynchronous: false })); ``` **实现原理:** 1. 使用`EllipseOutlineGeometry`创建线框几何体,参数需与原始圆形保持: - `semiMajorAxis`和`semiMinorAxis`等于原圆半径 - `numberOfVerticalLines`设为0避免生成垂直线 - 保持与填充圆形相同的高度和中心点 2. 通过`PolylineMaterialAppearance`渲染边框: - 使用不透明颜色(alpha=1)保证边框可见性 - `polylineWidth`控制线宽(实际渲染受WebGL限制) - `translucent: true`确保半透明物体正确处理 3. 使用独立Primitive实例: - 避免与填充图形的材质设置冲突 - 允许单独控制边框的渲染属性 **常见问题处理:** - 线宽显示问题:WebGL默认最大线宽为1px,可通过`CESIUM_batching`扩展支持更宽线段 - 深度冲突:设置`depthTest: { enabled: false }`可强制边框显示在最上层 - 性能优化:设置`asynchronous: false`确保几何体立即创建
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值