OpenLayers Tile 在 JavaFX 应用程序中随 Windows 文本比例缩放答案

【问题标题】：OpenLayers Tile scales with Windows text scale in JavaFX applicationOpenLayers Tile 在 JavaFX 应用程序中随 Windows 文本比例缩放
【发布时间】：2019-09-19 15:30:57
【问题描述】：

我在显示嵌入在 JavaFX 应用程序中的 OpenLayers 地图的 WebView 时遇到问题。

我使用的是 Windows 10 机器，当我将文本、应用程序等的 Windows 设置（在显示设置下）更改为 100% 以外的值时，地图不再填充其父级。

这是 100% 时的样子：这是我将文本等缩放到 125% 的时候：代码可以在这里找到：

import javafx.application.Application;
import javafx.concurrent.Worker;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.stream.Collectors;

public class Starter extends Application {

String html = "<!DOCTYPE html>\n"
              + "<html lang=\"en\">\n"
              + "<head>\n"
              + "    <meta charset=\"UTF-8\">\n"
              + "    <title>Title</title>\n"
              + "</head>\n"
              + "<body style=\"margin:0\">\n"
              + "<div id=\"map\"></div>\n"
              + "</body>\n"
              + "</html>";
String webview = "var map;\n"
                   + "function init(x, y, res)\n"
                   + "{\n"
                   + "    map = new ol.Map({\n"
                   + "            layers: [\n"
                   + "              new ol.layer.Tile({\n"
                   + "                source: new ol.source.OSM()\n"
                   + "              })\n"
                   + "            ],\n"
                   + "            target: 'map',\n"
                   + "            view: new ol.View({\n"
                   + "              center: [x, y],\n"
                   + "              projection: \"EPSG:3857\",\n"
                   + "              resolution: res\n"
                   + "            })\n"
                   + "          });\n"
                   + "}";

public static void main(String... args) {
    Starter.launch(args);
}

public void start(Stage primaryStage) {
    StackPane stackPane = new StackPane();
    Scene scene = new Scene(stackPane);

    WebView webView = new WebView();
    stackPane.getChildren().add(webView);

    setupMap(webView);
    webView.setMinWidth(800);
    webView.setMinHeight(600);

    webView.setVisible(true);

    primaryStage.setScene(scene);
    primaryStage.show();
}

private void setupMap(WebView webView) {
    WebEngine engine = webView.getEngine();

    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.loadContent(html);
    engine.executeScript(readResources("/js/ol.js"));
    engine.executeScript(webview);
}

private String readResources(String uri) {
    return new BufferedReader(new InputStreamReader(Starter.class.getResourceAsStream(uri))).lines().collect(Collectors.joining("\n"));
}
}

如您所见，没有什么令人兴奋的事情发生。令人困惑的是，在这两种情况下，控件都显示在窗口底部。

如果有任何关于我可以用来正确设置图块大小的选项的指针，我将不胜感激。

这是在 JavaFX 13 和 Java 11 上。“ol.js”是今天从 https://openlayers.org/download/ 下载的 OpenLayers 版本 5.3.0。

【问题讨论】：

标签： javafx webview openlayers

【解决方案1】：

使用这个库

https://www.sothawo.com/projects/mapjfx-demo/

对于谷歌地图也可以使用这个库

http://rterp.github.io/GMapsFX/

【讨论】：