Cesiumjs - Повернуть текст

Я хочу добавить метку, которая не всегда обращена к камере. Вместо этого я хочу, чтобы он следовал определенному пути. Подобно тому, как названия улиц следуют направлению их улиц на картах Google (они не всегда горизонтальны).

Я могу придумать 2 возможных реализации для поворота текста, но мне не повезло.

  1. У этого Label() или label: есть свойство вращения, которое я не нашел. ИИ примерно так:

    viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label : {
        text : 'Philadelphia'
        //rotation : Cesium.Math.toRadians(-45)
    }
});

или это

    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. Создайте изображения каждой этикетки в фотошопе и импортируйте их как изображение, затем поверните изображение (или используйте его в качестве материала и поверните объект). Очень трудоемко, если у вас много ярлыков (например, названий улиц).

Или, возможно, есть способ для cesiumjs распознавать текст как 2D-объект с фиксированным положением и соответствующим образом искажать его при изменении угла обзора.

Любые идеи?


text label cesium
person jl314    schedule 16.07.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Если ваш текст не меняется, вы можете использовать изображение и загрузить его с помощью Cesium.SingleTileImageryProvider . Если ваш текст изменится, вы можете использовать billboard.image, установить для него холст HTML и повернуть холст следующим образом:

   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;
person Henry Aloni    schedule 31.12.2015

arrow_upward
0
arrow_downward

Единственный способ, которым я знаю, как повернуть метку, - это, как сказал @Henri Aloni с холстом.

В Cesium уже есть функция с именем: writeTextToCanvas.

пример в машинописи:

viewer.entities.add({
    position: Cartesain3.fromDegrees(34, 32, 0),
    billboard: {
         image: writeTextToCanvas('baruch', {
                font: '30px sans-serif' 
               }), 
          rotation: 45
      } 
    });
person Baruch Levin    schedule 25.11.2020