2016-11-08 15 views
0

JavaFXのWebViewでOpenLayers v3でマップを表示する際に問題があります。ここに私のコードは次のとおりです。OpenLayers V3.19.1がJavaFX WebViewに表示されない

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> 

そして、ここでは、ローダの抜粋です:

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

私はHTMLを読み込む場合IEやFirefoxのようなブラウザであれば、問題なく表示されます。しかし、Javaプログラムでは、h2( "My Map")を持つ空白のページしかありません。しかし、JavaScriptは読み込まれません。だから、私はここで間違って何をしているのですか?

+0

ないが、確かに、しかし、あなたがロードされたがあることを確認してください必要なすべてのポリフィル(requestAnimationFrame、Element.prototype.classList、URL) – bartvde

+0

@bartvde [OK]を、私はHTMLのJavaScriptインポートに "URL"を追加しましたが、動作しませんでした。私はそれらを正しくロードしたことをどうすれば確認できますか? –

+0

私は同じ問題を抱えていました。 Polyfillsは正しい内容を返しません。私は間違ったユーザーエージェント(私はchrome/10.0.0を使用)を使用して正しいコードを提供することにそれを騙してしまいました。そのファイルがローカルにロードされて私のためのトリックでした。 – casualcoder

答えて

1

[OK]を、実際に私は解決策が見つかりました:あなたは、他のすべてのjavascriptのものの前に以下の行を追加する必要がありますのでrequestAnimationFrameのが発見されていない:これはそれであれば

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; 
関連する問題