Align text along a fixed heading/polyline

CesiumJS
1

Hello, I’m trying to add a label that aligns with a path, similar to how street names follow the direction of their streets in google maps (they aren’t always horizontal). I don’t want to just rotate the text say 45 degrees, I want to define it’s position and heading so when the user rotates the camera the text orientation changes appropriately.

Is there a way to do this that I haven’t found?

I started by trying to find a basic text rotate and discovered i couldn’t even figure that out. IE something like this:

viewer.entities.add({

position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),

label : {

text : ‘Philadelphia’

//rotation : Cesium.Math.toRadians(-45) … or even better heading : 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) … or even better heading : Cesium.Math.toRadians(-45)
});

``

Will I have to 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)? Obviously labor intensive if you have a lot of labels (like street names).

Thanks!

2

Label rotation isn’t supported yet (but is definitely something we want to support eventually). Your best bet for now is to use the writeTextToCanvas and make a billboard out of it. Label’s can’t do this because they render individual letters, not entire words (which is a huge performance/memory win that makes things like rotation difficult).

Here’s an example:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

var labels = scene.primitives.add(new Cesium.BillboardCollection());

labels.add({

position : Cesium.Cartesian3.fromDegrees(-74,13),

image : Cesium.writeTextToCanvas(‘Test’, { font: ‘24px san-serif’ }),

rotation : Cesium.Math.toRadians(90), //heading

alignedAxis : Cesium.Cartesian3.UNIT_Z //Makes rotation a heading

});

3

Hello, following up to see if this has been implemented, thanks!