Align text along a fixed heading/polyline

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!

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

});