Photoshop Question posted in
The official user guide can be found here.

Cesiumjs – Rotate text – Photoshop

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?

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    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
      } 
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search