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库的时候,遇到了添加多边形边框线没有显示的问题。让我仔细看看他的代码。 首先,他创建了个PolygonGeometry和个PolylineGeometry,然后分别用GeometryInstance包装,并通过Primitive添加到场景的primitives集合中。看起来结构是对的,但边框线没有显示出来可能有几个原因。 检查PolylineGeometry的配置。用户设置了material为颜色,但Cesium中PolylineGeometry的material属性可能不被直接支持,应该用外观(Appearance)来设置材质。或者,他可能在创建Primitive时没有正确指定外观,导致线没有材质,所以不显示。 再看PolylineGeometry的创建部分,用户用了Cesium.PolylineGeometry.createGeometry(polygonLine),然后生成GeometryInstance。但是在添加Primitive的时候,他给instanceLine用了默认的外观,可能没有设置颜色或线宽,导致线不可见。 另个可能性是坐标问题,val数组可能没有正确的经纬度数据,或者坐标顺序不正确,导致线无法正确绘制。不过用户提到多边形显示出来了,所以val的数据可能没问题,但线可能有其他问题。 还有,PolylineGeometry的width属性是否正确?在Cesium中,线宽可能受限制,特别是在某些浏览器或图形设置下,超过1的宽度可能不被支持,但用户设置的是2,这可能没问题,但需要确认。 此外,在创建Primitive时,对于线几何体,可能需要指定合适的Appearance,比如PolylineMaterialAppearance,并设置对应的材质。用户可能在添加this.DJXFNew的时候没有设置appearance,导致线没有颜色。 比如,正确的做法是在创建线的Primitive时,指定个PolylineMaterialAppearance,并设置material属性。或者,使用PolylineColorAppearance,但需要配合颜色使用。 另外,检查是否线被其他图形覆盖,或者深度测试导致线被隐藏。可以尝试调整线的高度模式或者关闭深度测试,但可能需要更多的配置。 还有可能是异步加载的问题,但Cesium的几何体创建通常是同步的,所以可能性较低。 总结可能的原因: 1. 线的Primitive没有正确设置外观(Appearance),导致材质未应用。 2. 线宽或颜色设置有误,比如透明度问题。 3. 坐标数据问题,虽然多边形显示,但线可能有不同的处理方式。</think><< 在Cesium中添加边框线未显示的原因通常与材质(Material)或外观(Appearance)配置有关。以下是修正后的代码: ```javascript let _this = this; // 创建多边形几何体(无需修改) var polygon = new Cesium.PolygonGeometry({ polygonHierarchy: { positions: Cesium.Cartesian3.fromDegreesArray(val) } }); // 创建边框线几何体(修正材质设置方式) var polygonLine = new Cesium.PolylineGeometry({ positions: Cesium.Cartesian3.fromDegreesArray(val), width: 2, // 注意:PolylineGeometry不支持直接设置material属性 // 需要在外观中设置材质 }); // 创建几何实例(保持原样) var geometry = Cesium.PolygonGeometry.createGeometry(polygon); const instance = new Cesium.GeometryInstance({ geometry: geometry, }); var geometryLine = Cesium.PolylineGeometry.createGeometry(polygonLine); const instanceLine = new Cesium.GeometryInstance({ geometry: geometryLine, }); // 添加多边形面(保持原样) this.DJXF = this.viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: instance, appearance: new Cesium.MaterialAppearance({ material: new Cesium.Material({ fabric: { type: "Color", uniforms: { color: Cesium.Color.fromCssColorString(color).withAlpha(0.5) } } }) }) })); // 修正边框线显示问题(关键修改) this.DJXFNew = this.viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: instanceLine, appearance: new Cesium.PolylineMaterialAppearance({ material: new Cesium.PolylineColorMaterial({ color: Cesium.Color.fromCssColorString(color).withAlpha(1) }) }) })); this.DJXFArr.push(this.DJXF, this.DJXFNew); ``` **问题原因解释:** 1. **材质配置错误**:原始代码在创建PolylineGeometry时尝试直接设置material属性,但Cesium的PolylineGeometry本身不支持直接设置材质 2. **缺少外观配置**:边框线的Primitive没有指定合适的appearance(如PolylineMaterialAppearance) 3. **颜色通道问题**:可能需要显式禁用深度测试(depthTest)确保线始终可见 4. **线宽限制**:某些WebGL环境可能限制最大线宽为1像素 **改进建议:** - 为线几何体添加深度测试配置: ```javascript appearance: new Cesium.PolylineMaterialAppearance({ material: new Cesium.PolylineColorMaterial({ color: Cesium.Color.fromCssColorString(color) }), translucent: true, renderState: { depthTest: { enabled: false // 禁用深度测试确保线始终可见 } } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值