铯：主题信息框答案

【问题标题】：Cesium: Theming the InfoBox铯：主题信息框
【发布时间】：2016-09-07 16:26:22
【问题描述】：

我在 Google Groups 上看到了一些示例，这些示例演示了如何修改信息框的 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>';
    }
  }
}

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

是否有人可以提供关于覆盖信息框主题的更多见解，而无需遍历实体来修改其描述属性的值？

【问题讨论】：

标签： cesium

【解决方案1】：

这里的原始解决方案不起作用，因为 infoBox 是一个 iframe，在您尝试修改它时尚未异步加载。

相反，您可以向 iframe 添加 load 侦听器，如下所示：

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 准备好接收修改，然后应用它。

【讨论】：

你杀了它。这种方法更有意义，看起来更可靠。

【解决方案2】：

对于它的价值，我发现通过简单地将我的 css 文件导入文档头部来修改信息框的主题是成功的。我不知道为什么我不能直接用样式表修改它，因为它以前没有影响信息框的外观，这个问题反映在我在 cesium-dev Google Group 中找到的帖子中。无论如何，它现在似乎工作得很好。

【讨论】：