1 效果图
2 实现方式
采用cesium自带的label来实现:
this._viewer!.entities.add({
// id: "Vehicle",
id: vehicleID,
...<被作者省略>
label: {
show: true,
showBackground: true,
font: "14px Courier New",
backgroundColor: new Color(0.9, 0.9, 0.9, 0.6),
fillColor: Color.GREEN,
horizontalOrigin: HorizontalOrigin.LEFT,
verticalOrigin: VerticalOrigin.BASELINE,
pixelOffset: new Cartesian2(5, 5),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
// text: vehicleID + "\nlong: xx\nlat: xx"
// text: new CallbackProperty(this.updatedInfo, false)
text: new CallbackProperty((time, result) => {
let sampledIdx = Math.floor(JulianDate.secondsDifference(<JulianDate>time, stTime) / timeOfResolution);
let pos = sampledPositions[sampledIdx];
result = sampledIdx.toString();
if(this._showNameFlags.get(vehicleID)) {
result = result +
"\nid : " + vehicleID;
}
if(this._showPosFlags.get(vehicleID)) {
result = result +
"\nlong : " + pos.latitude +
"\nlat : " + pos.longitude +
"\nheight: " + pos.height;
}
return result;
}, false)
}
3 Ref
[1] https://sandcastle.cesium.com/index.html?src=Clamp%20to%203D%20Model.html