Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/444.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在Cesium.js中创建始终位于多段线附近的标签?_Javascript_Typescript_Cesium_Geodesic Sphere - Fatal编程技术网

Javascript 如何在Cesium.js中创建始终位于多段线附近的标签?

Javascript 如何在Cesium.js中创建始终位于多段线附近的标签?,javascript,typescript,cesium,geodesic-sphere,Javascript,Typescript,Cesium,Geodesic Sphere,我有一种情况,我使用Cesium.js实体从一个点绘制方位线。另外,我想在实体上的这些轴承线上贴一个标签,以显示它是什么。通过将标签附着到多段线图元,可以很容易地做到这一点。到目前为止,我所做的是从参考点沿轴承创建一条“非常长”的线,并使用该线的中点作为标签的锚(在Typescript中): 但问题是标签是在测地线(lat/lon)坐标中,当用户放大和缩小方位线时,标签不会停留在屏幕上。因此,我还尝试使用pixelOffsetScaleByDistance属性缩放位置,但这也不能很好地工作,也不

我有一种情况,我使用Cesium.js实体从一个点绘制方位线。另外,我想在实体上的这些轴承线上贴一个标签,以显示它是什么。通过将标签附着到多段线图元,可以很容易地做到这一点。到目前为止,我所做的是从参考点沿轴承创建一条“非常长”的线,并使用该线的中点作为标签的锚(在Typescript中):

但问题是标签是在测地线(lat/lon)坐标中,当用户放大和缩小方位线时,标签不会停留在屏幕上。因此,我还尝试使用pixelOffsetScaleByDistance属性缩放位置,但这也不能很好地工作,也不能将标签保持在直线附近 在3d旋转下(因为X和Y缩放在技术上必须更改)

看起来我真正需要的是线端点的屏幕空间位置,以及在该中点创建实体标签的方法。有办法做到这一点吗如果不是,那么无论用户与铯贴图的交互(例如缩放和旋转),确保标签始终靠近多段线的最佳方法是什么?

为了让大家知道我在做什么,这里有一个铯的屏幕盖,上面有实现时的标签。它们在这里看起来是正确的,但这只是因为我确保了缩放级别和旋转是正确的:

 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);