セシウム：インボックスのテーマ化

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

元のソリューションは機能していませんでした。これは、インフォボックスが、変更しようとしているときにまだ非同期に読み込まれていない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は修正を受信する準備ができになるのを待ち、それを適用します。

Answer 2

私は、文章の頭にcssファイルをインポートするだけで、インフォボックスのテーマを変更することに成功しました。私はなぜ以前はスタイルシートでスタイルシートを変更できなかったのか分かりません。これは以前はインフォボックスの外観に影響していなかったので、この問題はGoogleのCesium-dev Googleグループで見つかった記事にも反映されています。それにもかかわらず、今はうまくいっているようだ。