Cesiumjs -旋转文本

Question

我想添加一个不总是面对镜头的标签。相反，我希望它遵循一条定义的路径。类似于谷歌地图中街道名称的方向(并不总是横向的)。

我可以想到两个可能的实现旋转文本，但没有任何运气。

1. 这个标签()或标签:有一个我还没有找到的旋转属性。(像这样的) viewer.entities.add({位置: Cesium.Cartesian3.fromDegrees(-75.1641667，39.9522222)，标签：{ text：‘text’//旋转: 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中创建每个标签的图片，并将其作为图像导入，然后旋转图像(或将其用作材料并旋转实体)。如果你有很多标签(比如街道名称)，那就非常劳动密集。

或者，cesiumjs可以将文本识别为一个固定位置的2D对象，并在视角发生变化时对其进行适当的倾斜。

有什么想法吗？

Answer 1

如果您的文本没有改变，您可以使用一个图像，并通过Cesium.SingleTileImageryProvider加载它。如果您的文本确实发生了更改，您可以使用billboard.image，将HTML设置为它，并按如下方式旋转画布：

   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;

Answer 2

“我知道如何旋转标签的唯一方法是像”亨利·阿罗尼用帆布说的那样。

铯已经有了一个叫做: writeTextToCanvas的函数。

打字本中的示例：

viewer.entities.add({
    position: Cartesain3.fromDegrees(34, 32, 0),
    billboard: {
         image: writeTextToCanvas('baruch', {
                font: '30px sans-serif' 
               }), 
          rotation: 45
      } 
    });