【cesium primitive api】 如何绘制贴地字

描述这样的问题,其实应该说得更加细致一点,我希望绘制一个文本,这个文本是躺在地球平面之上的,而且文本是不会随着我相机的位置而发生变化,虽然cesium 提供了 label 实体,但是那个是经过封装之后的对象,他会随着相机的俯仰角变化而让自己发生变化。同时我们希望我们的字体就像一个图形一样,可以在给定高度的平面内,有的 同学会想设置高度参考为贴地,其实那个和我们实际想要的效果并不同,你可以实际操作一下进行对比。

换句话说,我们的思路就很清晰了,也就是通过canvas画出文本的图片,再将文本的图片作为图元的材质,这时候无论是平面图元还是立体图元都是可以设置的了。

以下是我的一个实现思路:

	    const canvas = document.createElement ('canvas');
		canvas.width = 40;
		canvas.height = 20;
		const context = canvas.getContext ('2d');

		context.fillStyle = 'rgba(240, 240, 240, 0)';
		context.fillRect (0, 0, canvas.width, canvas.height);

		context.font = '12px sans-serif';
		context.fillStyle = '#000';
		context.textAlign = 'center';
		context.textBaseline = 'middle';
		context.fillText (text, canvas.width / 2, canvas.height / 2);

		const image = new Image ();
		image.src = canvas.toDataURL ();

		const rectanglePrimitive = this.viewer.scene.primitives.add (
			new Cesium.Primitive ({
				geometryInstances: new Cesium.GeometryInstance ({
					geometry: new Cesium.RectangleGeometry ({
						rectangle: Cesium.Rectangle.fromDegrees (
							center.coordinates[0] - 0.00003,
							center.coordinates[1] - 0.000015,
							center.coordinates[0] + 0.00003,
							center.coordinates[1] + 0.000015
						),
						height: height + 0.5,
					}),
				}),
				appearance: new Cesium.MaterialAppearance ({
					material: new Cesium.Material ({
						fabric: {
							type: 'Image',
							uniforms: {
								image: image.src,
							},
						},
					}),
				})
			})
		);
		this.units.push (rectanglePrimitive)

这是最后的效果:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Cesium是一个用于构建地球上三维地理应用的开源JavaScript库。它提供了丰富的功能,包括贴地primitivePrimitive)的支持。 贴地primitive是指在地球表面上精确合的三维几何体。Cesium中的primitive对象可以用于创建和渲染各种类型的几何体,如点、线、面等。而贴地primitive则是这些几何体在地球表面上的投影。 要创建一个贴地primitive,你可以使用Cesium提供的几何体生成器(GeometryGenerator)来创建几何体,并将其与一个贴地材质(GroundMaterial)结合使用。通过将几何体的顶点位置调整为地球表面上的位置,再使用贴地材质进行渲染,就可以实现贴地效果。 以下是一个使用Cesium创建一个贴地primitive的示例代码: ```javascript // 创建一个几何体 var geometry = Cesium.GeometryGenerator.createGeometry(Cesium.GeometryType.Box); // 将几何体的顶点位置调整为地球表面上的位置 Cesium.GeometryGenerator.projectToGeoreferencedEllipsoid(geometry, Cesium.Ellipsoid.WGS84); // 创建一个贴地材质 var material = new Cesium.GroundMaterial({ color: Cesium.Color.RED }); // 创建一个贴地primitive var primitive = new Cesium.GroundPrimitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: geometry, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE) } }), appearance: new Cesium.MaterialAppearance({ material: material }) }); // 将primitive添加到场景中 viewer.scene.primitives.add(primitive); ``` 上述代码创建了一个贴地的红色立方体,并将其添加到了Cesium的场景中。你可以根据自己的需求修改几何体的类型、材质及其他属性来创建不同的贴地primitive

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值