label - Cesiumjs - Rotate text -
i want add label doesn't face camera. instead, want follow defined path. similar how street names follow direction of streets in google maps (they aren't horizontal).
i can think of 2 possible implementations rotating text haven't had luck.
that label() or label : have rotation property haven't found. ie 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) });
- create pictures of each label in photoshop , import them image, rotate image (or use material , rotate entity). labor intensive if have lot of labels (like street names).
or perhaps there way cesiumjs recognize text fixed position 2d object , skew appropriately view angle changes.
any ideas?
if text doesn't change, can use image, , load cesium.singletileimageryprovider . if text change, can use billboard.image, set html canvas it, , rotate canvas 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 gradient ctx.rotate(20*math.pi/180); ctx.fillstyle = gradient; ctx.filltext("big smile!", 10, 90); billboard.image = ctx;
Comments
Post a Comment