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;
我在 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;