JavaFX应用中OpenLayers瓦片随Windows文本缩放异常求助

这个问题的核心是Windows高DPI缩放（非100%）时，JavaFX WebView的逻辑像素与实际渲染像素不匹配，导致OpenLayers初始化时无法获取容器的真实尺寸，同时控件位置因为基于逻辑像素计算而偏移到底部。以下是针对性的修复步骤：

1. 修复HTML容器的尺寸设置 #

首先确保地图容器（#map）及其父元素（html、body）完全占满WebView的空间，添加CSS样式强制宽高为100%并清除内外边距：

修改你的html变量为：

String html = "<!DOCTYPE html>\n" +
        "<html lang=\"en\">\n" +
        "<head>\n" +
        "    <meta charset=\"UTF-8\">\n" +
        "    <title>Title</title>\n" +
        "    <style>\n" +
        "        html, body, #map {\n" +
        "            width: 100%;\n" +
        "            height: 100%;\n" +
        "            margin: 0;\n" +
        "            padding: 0;\n" +
        "            overflow: hidden;\n" +
        "        }\n" +
        "    </style>\n" +
        "</head>\n" +
        "<body>\n" +
        "<div id=\"map\"></div>\n" +
        "</body>\n" +
        "</html>";

2. 启用JavaFX高DPI支持 #

在启动应用时添加JVM参数，让JavaFX正确处理高DPI缩放：

-Dprism.allowhidpi=true

这个参数会让WebView使用实际的像素尺寸而非逻辑像素进行渲染，确保OpenLayers能获取到正确的容器大小。

3. 手动触发OpenLayers地图尺寸更新 #

由于WebView在高DPI环境下可能不会自动触发resize事件，在地图初始化完成后手动调用map.updateSize()来强制刷新尺寸：

修改setupMap方法中的监听逻辑：

engine.getLoadWorker().stateProperty().addListener(
        (ov, oldState, newState) -> {
            if (newState == Worker.State.SUCCEEDED) {
                Point2D somewhereInRome = new Point2D(1391089.0996927358, 5146427.764506837);
                // 初始化地图
                engine.executeScript("init(" + somewhereInRome.getX() + "," + somewhereInRome.getY() + "," + 1 + ");");
                // 强制刷新地图尺寸
                engine.executeScript("map.updateSize();");
            }
        });

4. 优化WebView的布局设置 #

确保WebView能完全填充父容器（StackPane），可以去掉webView.setMinWidth(800);和webView.setMinHeight(600);，或者替换为pref属性让它随窗口自适应：

// 替换原来的minWidth/minHeight设置
webView.setPrefWidth(Double.MAX_VALUE);
webView.setPrefHeight(Double.MAX_VALUE);

额外说明 #

如果上述步骤仍有问题，可以尝试将屏幕缩放比例传递给OpenLayers的视图，调整分辨率计算：

// 获取当前屏幕的缩放比例
double scale = Screen.getPrimary().getOutputScaleX();
// 初始化时将分辨率乘以缩放比例
engine.executeScript("init(" + somewhereInRome.getX() + "," + somewhereInRome.getY() + "," + (1 * scale) + ");");

这样调整后，OpenLayers会基于实际像素分辨率渲染瓦片，匹配高DPI下的显示效果。

内容的提问来源于stack exchange，提问作者Sebastian Schmitz