让BillboardCollection和LabelCollection继承其实体的位置

时间:2016-08-25 12:12:14

标签: cesium

我正在尝试解决TextureAtlas会溢出的问题,如果我使用svg创建一个动态标签,我的文本元素会不断变化。

我的想法是使用和entity作为标签,背景为BillboardCollection,文本为LabelCollection。但是我意识到收藏品实际上并不是我把它们放入其中的实体的一部分,我认为它在某种程度上是有道理的。 如果没有指定单独的位置,是否有办法使作为实体一部分的billboardCollection和LabelCollection继承该实体的位置? 如果这不起作用,我是否需要将每个图形元素和文本放入单独的实体中?

动态标签的最佳实践是什么,我选择的背景预计会非常非常非常地更新,有很多类似的标签而不会因为TextureAtlas溢出而杀死Cesium?

1 个答案:

答案 0 :(得分:0)

Cesium的实体有标签和广告牌,但它们通常在活动实体中共享一个LabelCollection和BillboardCollection。标签的文本可以经常更改,但TextureAtlas小心地重复使用它已经从相同字体看到的字形。如果使用正确,这应该可以防止它溢出。

允许每个实体管理自己的集合会使这种优化失败,您可以更快地获得溢出。整个集合旨在通过单个绘制调用进行渲染,因此如果每个实体管理一个集合,那么您将获得每个实体的单独绘制调用,这会非常快速。在正常流程中,所有带有广告牌的实体共享一个BillboardCollection,一次绘制调用获取屏幕上的所有广告牌,然后第二次绘制调用获取屏幕上所有实体的所有标签。

以下是实体上时变标签的示例。这应该会产生一个带有标签的实体,该标签在播放动画时会非常快速地改变文本。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationInstructionsInitiallyVisible: false,
    // These next 5 lines are just to avoid the Bing Key error message.
    imageryProvider : Cesium.createTileMapServiceImageryProvider({
        url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
    }),
    baseLayerPicker : false,
    geocoder : false,
    // This next line fixes another Stack Snippet error, you may omit
    // this setting from production code as well.
    infoBox : false
});

var startTime = Cesium.JulianDate.fromIso8601('2016-08-01T00:00:00Z');
var intervalStart = startTime;

var labelText = new Cesium.TimeIntervalCollectionProperty();

for (var x = 0; x < 86400; ++x) {
    var intervalStop = Cesium.JulianDate.addSeconds(startTime, x, new Cesium.JulianDate());
    labelText.intervals.addInterval(new Cesium.TimeInterval({
        start: intervalStart,
        stop: intervalStop,
        data: 'Time ' + x
    }));
    intervalStart = intervalStop;
}

var clock = viewer.clock;
clock.startTime = startTime;
clock.stopTime = intervalStart;
clock.currentTime = startTime;
clock.clockRange = Cesium.ClockRange.CLAMPED;
clock.multiplier = 30;
viewer.timeline.zoomTo(clock.startTime, clock.stopTime);

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label : {
        text : labelText
    }
});
html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}
<link href="http://cesiumjs.org/releases/1.20/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.20/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>