Cesium:主题InfoBox

Question

我在Google网上论坛上看到了一些示例,演示了如何修改信息框的css.在此特定示例中,javascript用于将css链接附加到文档的头部:

https://groups.google.com/forum/#!topic/cesium-dev/f0iODd42PeI

var cssLink = frameDocument.createElement("link");
cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);

但是,这并未导致我的标记样式发生任何变化.

充其量,我已经能够通过在加载geoJson数据集之后迭代.then函数调用中的实体来包装信息框的内容.在包装内容时,我可以设置在结果标记中很明显的样式值.

var dataSource = Cesium.GeoJsonDataSource.load('../data/mGeoJson.json').then(function(data)  {
  viewer.dataSources.add(data);
  var entities = data.entities.values;
  for (var i = 0; i < entities.length; i++) 
    var entity = entities[i];
    if (entity.properties.hasOwnProperty("description")) {
      entity.description = '<div style="height: 360px;">' + entity.properties.description
      + '</div>';
    }
  }
}

这很有用,但不能完全满足我的应用程序的要求.

有人可以提供额外的洞察力来覆盖信息框的主题,而不必迭代实体来修改其描述属性的值吗？

Answer 1

这里的原始解决方案无效,因为infoBox是一个iframe,当您尝试修改它时尚未异步加载.

相反,您可以load向iframe 添加一个侦听器,如下所示:

var viewer = new Cesium.Viewer('cesiumContainer');
var frame = viewer.infoBox.frame;

frame.addEventListener('load', function () {
    var cssLink = frame.contentDocument.createElement('link');
    cssLink.href = Cesium.buildModuleUrl('Path/To/Your/CSS/File.css');
    cssLink.rel = 'stylesheet';
    cssLink.type = 'text/css';
    frame.contentDocument.head.appendChild(cssLink);
}, false);

这等待iframe准备好接收修改,然后应用它.