Cäsium: Theming der InfoBox

Question

Ich habe ein paar Beispiele in Google Groups gesehen, die zeigen, wie man die CSS der Infobox ändert. In diesem speziellen Beispiel wird Javascript verwendet, um eine CSS-Link auf den Kopf des Dokuments anzuhängen:

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); 

Dies hat jedoch keine Änderungen an den Stil meiner Markup nicht geführt.

Im besten Fall war ich in der Lage, den Inhalt der Infobox zu verpacken, indem ich nach dem Laden eines geoJson-Datensatzes die Entitäten im Funktionsaufruf .then durchlaufen habe. Beim Umbrechen des Inhalts kann ich Stilwerte festlegen, die im resultierenden Markup leicht erkennbar sind.

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>'; 
    } 
    } 
} 

Dies ist nützlich, aber erfüllt nicht vollständig die Anforderungen meiner App.

Könnte jemand bieten zusätzliche Einblicke in das Thema des infobox überschreiben, ohne über Einheiten zu durchlaufen, die den Wert ihrer Beschreibung Eigenschaften zu modifizieren?

Answer 1

Die ursprüngliche Lösung hier funktionierte nicht, da die InfoBox ein Iframe ist, der noch nicht asynchron geladen wurde, als Sie versuchten, es zu ändern.

Stattdessen können Sie einen load Zuhörer auf die iframe, wie folgt hinzufügen:

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); 

Dieser wartet auf die iframe bereit zu werden, um die Änderung zu erhalten, und wendet sie dann.

Answer 2

Für was es wert ist, ich habe Erfolg durch einfachen Import meiner CSS-Dateien im Kopf des Dokuments bei der Modifizierung des Themas der infobox gefunden. Ich bin mir nicht sicher, warum ich es nicht in der Lage war, mit Stylesheets direkt zu ändern, da es nicht zuvor in der InfoBox Aussehen zu beeinträchtigen, und dieses Problem wurde in den Beiträgen gespiegelt, die ich in der Cäsium-dev Google-Gruppe gefunden. Egal, es scheint jetzt gut zu funktionieren.