2016-11-08 2 views
0

Ich habe Probleme beim Anzeigen einer Karte mit OpenLayers v3 in JavaFX WebView. Hier ist mein Code:OpenLayers V3.19.1 wird nicht in JavaFX WebView angezeigt

openLayersV3.html

<!doctype html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" 
    href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css"> 
<style> 
.map { 
    height: 400px; 
    width: 400px; 
} 
</style> 
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script> 
<script src="https://openlayers.org/en/v3.19.1/build/ol.js" 
    type="text/javascript"></script> 
<title>OpenLayers 3 example</title> 
<script type="text/javascript"> 
     function loadMap() { 
      var map = new ol.Map({ 
       target: 'map', 
       layers: [ 
        new ol.layer.Tile({ 
        source: new ol.source.OSM() 
        }) 
       ], 
       view: new ol.View({ 
        center: ol.proj.fromLonLat([10.0, 53.55]), 
        zoom: 10 
       }) 
       }); 
     } 
    </script> 
</head> 
<body onLoad="loadMap()"> 
    <h2>My Map</h2> 
    <div id="map" class="map"></div> 
</body> 
</html> 

Und hier ist ein Auszug aus dem Lader:

OsmView.java

... 
protected WebView webView = new WebView(); 
protected WebEngine webEngine = webView.getEngine(); 

public OsmView() { 
    final URL urlOsmMap = getClass().getResource("/some/package/name/openLayersV3.html"); 

    webEngine.load(urlOsmMap.toExternalForm()); 
    getChildren().add(webView); 
} 
... 

Wenn ich die html laden in Ein Browser wie IE oder Firefox, zeigt es ohne Komplikationen. Aber im Java-Programm gibt es nur eine leere Seite mit dem h2 ("My Map"). Aber das JavaScript wird nicht geladen. Also, was mache ich hier falsch?

+0

nicht sicher, ob dies ist es, aber stellen Sie sicher, dass Sie geladen haben alle benötigten Polyfills (requestAnimationFrame, Element.prototype.classList, URL) – bartvde

+0

@bartvde Ok, ich habe "URL" zum JavaScript-Import im HTML hinzugefügt, aber es hat nicht funktioniert. Wie kann ich sicherstellen, dass ich sie richtig geladen habe? –

+0

Ich hatte das gleiche Problem. Polyfills würden nicht den richtigen Inhalt zurückgeben. Am Ende habe ich versucht, den richtigen Code zu liefern, indem ich einen falschen User-Agent benutze (ich habe chrome/10.0.0 benutzt). Die lokal geladene Datei hat den Trick für mich gemacht. – casualcoder

Antwort

1

Ok, eigentlich fand ich eine Lösung: die request nicht gefunden wird, so dass Sie die folgenden Zeilen vor jedem anderen Javascript Sachen hinzufügen:

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     function(callback, element) { 
      window.setTimeout(callback, 1000/60); 
     }; 
})(); 
var requestAnimationFrame = window.requestAnimFrame;