CODEWITHSUNDEEP
textlabelcesiumjs
jl314
jl314

Reputation: 31

Cesiumjs - Rotate text

I want to add a label that doesn't always face the camera. Instead, I want it to follow a defined path. Similar to how street names follow the direction of their streets in google maps (they aren't always horizontal).

I can think of 2 possible implementations for rotating text but haven't had any luck.

  1. That Label() or label : have a rotation property I haven't found. IE something like this:

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

or this

    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. Create Pictures of each label in photoshop and import them as an image, then rotate the image (or use it as a material and rotate the entity). Very labor intensive if you have a lot of labels (like street names).

Or perhaps there is a way for cesiumjs to recognize text as a fixed position 2D object and skew it appropriately as the view angle changes.

Any ideas?

Upvotes: 3

Views: 1273

Answers (2)

Baruch Levin
Baruch Levin

Reputation: 372

The only way I know how to rotate a label is like @Henri Aloni said with canvas.

Cesium has already a function called: writeTextToCanvas.

example in typescript :

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

Upvotes: 1

Henry Aloni
Henry Aloni

Reputation: 647

If your text doesn't change, You can use an image, and load it by Cesium.SingleTileImageryProvider . If your text does change, you can use a billboard.image, set an HTML canvas to it, and rotate the canvas like so:

   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;

Upvotes: 1

Related Questions