Как я могу создать ярлык, который всегда остается рядом с ломаной линией в Cesium.js? - PullRequest
Новая
       36

Как я могу создать ярлык, который всегда остается рядом с ломаной линией в Cesium.js?

1 голос
/ 23 мая 2019

У меня есть ситуация, когда я использую сущности Cesium.js для рисования опорных линий от точки. Кроме того, я хотел бы прикрепить ярлык к этим линиям на объекте, чтобы показать, что это такое. Это достаточно просто сделать, прикрепив метку к полилинии. До сих пор, что я делаю это создание «очень долго» линии вдоль подшипника от опорной точки и используя среднюю точку вдоль этой линии в качестве якоря для метки (в машинописном): 

 let newEntity : Cesium.Entity;
 let gccalc : gc.GreatCircle = new gc.GreatCircle();
 let bearing : number = 45.0; //Bearing for the line

 //this.currentPos is the lat/lon for the reference point for our bearing line
 //gccalc is a simple class for computing great circle lines and has been omitted here (it is not relevant to the problem)
 let destination  =  gccalc.destination(this.currentPos[0], this.currentPos[1], bearing, 1500, 'MI');
 let anchorLabel = gccalc.destination(this.currentPos[0], this.currentPos[1], bearing, 50, 'MI');

 const lineMat  = new Cesium.PolylineDashMaterialProperty({
                    color : this.typeColorMap.get(contact.type)
                  });

 const poses = Cesium.Cartesian3.fromDegreesArrayHeights([this.currentPos[1], this.currentPos[0], 500, 
            destination[1], destination[0], 500]); //500 is an arbitrary altitude for aesthetics            

 const nameString : string = "StringLabel";
 let lineLabel = {
            text: nameString,
            font: '16px Helvetica',
            fillColor : this.typeColorMap.get(contact.type),
            outlineColor : Cesium.Color.BLACK,
            outlineWidth : 2,
            verticalOrigin : Cesium.VerticalOrigin.MIDDLE,
            horizontalOrigin : Cesium.HorizontalOrigin.MIDDLE,
            pixelOffset : new Cesium.Cartesian2(20, 0),
            //pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e-1, 30.0, 1.5e7, 0.5)
  };

  let bearingLine = new Cesium.PolylineGraphics();
  bearingLine.positions = poses;
  bearingLine.width = 4;
  bearingLine.material = lineMat;
  bearingLine.arcType = Cesium.ArcType.NONE;


  const lineEntity =  {
        name : 'Bearing Line',
        polyline : bearingLine,
        position : Cesium.Cartesian3.fromDegrees(anchorLabel[1], anchorLabel[0]),
        show : true,
        label : new Cesium.LabelGraphics(
            lineLabel,
        ) as Cesium.LabelGraphics,

 };
 newEntity = new Cesium.Entity(lineEntity);

Но проблема в том, что метка находится в геодезических (широта / долгота) координатах и ​​не остается на экране, когда пользователь увеличивает и уменьшает линию подшипника. Поэтому я также попытался масштабировать позицию, используя свойство pixelOffsetScaleByDistance, но это также не очень хорошо работает и не удерживает метку рядом с линией при 3-х поворотах (потому что технически придется изменить масштаб X и Y).

Похоже, что мне действительно нужно, это позиции на экране конечных точек и способ создания метки объекта в этой средней точке. Есть ли способ сделать это? Если нет, то как лучше всего обеспечить, чтобы моя метка всегда находилась рядом с моей полилинией, независимо от взаимодействия пользователя с картой цезия (например, увеличения и поворота)?

Чтобы дать представление о том, что я пытаюсь сделать, вот скриншот цезия с внедренными ярлыками. Здесь они выглядят правильно, но только потому, что я убедился, что уровень масштабирования и вращение верны: Screencap of attempt so far

...