OpenLayers V3.19.1未顯示在JavaFX WebView中

我在使用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的空白頁面（「我的地圖」）。但JavaScript不加載。那麼，我在這裏做錯了什麼？

來源

2016-11-08 Lars Junker

不知道這是它，但要確保你已經裝所有需要的polyfills（requestAnimationFrame，Element.prototype.classList，URL） – bartvde

@bartvde好吧，我在HTML中添加了「URL」到JavaScript導入，但它沒有工作。我如何確保我正確加載了它們？ –

我有同樣的問題。 Polyfills不會返回正確的內容。我最終試圖通過使用錯誤的用戶代理（我使用chrome/10.0.0）來提供正確的代碼。該文件在本地加載爲我做了詭計。 – casualcoder

好吧，其實我發現了一個解決方案：requestAnimationFrame沒有找到，所以你完全有其他的JavaScript的東西之前添加下面幾行：

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;

來源

2016-11-08 10:57:22

OpenLayers V3.19.1未顯示在JavaFX WebView中

回答

相關問題