OpenLayers V3.19.1 未显示在 JavaFX WebView 中

OpenLayers V3.19.1 doesn't show in JavaFX WebView

我在 JavaFX 的 WebView 中使用 OpenLayers v3 显示地图时遇到问题。这是我的代码:

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

当我在 IE 或 Firefox 等浏览器中加载 html 时,它显示得很顺利。但是在 Java 程序中,只有一个带有 h2 ("My Map") 的空白页。但是 Java 脚本没有加载。那么,我在这里做错了什么?

好吧,实际上我找到了一个解决方案:没有找到 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;