cesium label实现信息动态更新且跟随实体[cesium info dynamic tracking]

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