我有一种情况,我正在使用 Cesium.js 实体从一个点绘制方位线。此外,我想在实体上的这些轴承线上贴一个标签,以显示它是什么。通过将标签附加到折线实体很容易做到这一点。到目前为止,我正在做的是从参考点沿轴承创建一条“非常长”的线,并使用沿该线的中点作为标签的锚点(在 Typescript 中):
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 属性来缩放位置,但这也不能很好地工作,并且不会将标签保持在 3d 旋转下的线附近(因为 X 和 Y 缩放在技术上必须改变)。
看来我真正需要的是线端点的屏幕空间位置,以及在该中点创建实体标签的方法。有没有办法做到这一点?如果不是,那么无论用户与 Cesium 地图(例如缩放和旋转)的交互如何,确保我的标签始终靠近我的折线的最佳方法是什么?
为了让我了解我正在尝试做什么,这里有一个 Cesium 的屏幕截图,其中的标签已实现。它们在这里看起来是正确的,但这只是因为我确保缩放级别和旋转是正确的: