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.

  1. 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)     }); 
  1. 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

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -