text - Cesiumjs - 旋转文本

Question

我想添加一个不总是面向相机的标签。相反，我希望它遵循定义的路径。类似于街道名称在谷歌地图中遵循街道方向的方式(它们并不总是水平的)。

我可以想到 2 种可能的旋转文本实现方式，但没有成功。

1. 那个 Label() 或 label : 有一个我还没有找到的旋转属性。 IE 是这样的:

   viewer.entities.add({
       position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
       label : {
           text : 'Philadelphia'
           //rotation : Cesium.Math.toRadians(-45)
       }
   });
   

或者这个

    var labels = scene.primitives.add(new Cesium.LabelCollection());
    var l = labels.add({
        position : Cesium.Cartesian3.fromRadians(longitude, latitude, height),
        text : 'Hello World',
        font : '24px Helvetica'
        //rotation: Cesium.Math.toRadians(-45)
    });

1. 在 photoshop 中创建每个标签的图片并将它们导入为图像，然后旋转图像(或将其用作 Material 并旋转实体)。如果您有很多标签(如街道名称)，则劳动强度很大。

或者也许有一种方法可以让 cesiumjs 将文本识别为固定位置的 2D 对象，并随着视角的变化适本地倾斜它。

有什么想法吗？

Answer 1

如果您的文本没有改变，您可以使用图像，并通过 Cesium.SingleTileImageryProvider 加载它。如果您的文本发生变化，您可以使用 billboard.image，为其设置 HTML Canvas ，然后像这样旋转 Canvas :

   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");

   ctx.font = "20px Georgia";
   ctx.fillText("Hello World!", 10, 50);

   ctx.font = "30px Verdana";
   // Create gradient
   var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
   gradient.addColorStop("0", "magenta");
   gradient.addColorStop("0.5", "blue");
   gradient.addColorStop("1.0", "red");
   // Fill with gradient
   ctx.rotate(20*Math.PI/180);
   ctx.fillStyle = gradient;
   ctx.fillText("Big smile!", 10, 90);
   billboard.image = ctx;