JavaFX WebEngine 中的传单地图答案

【问题标题】：Leaflet Map in JavaFX WebEngineJavaFX WebEngine 中的传单地图
【发布时间】：2015-09-28 03:44:31
【问题描述】：

我在使用 JavaFX Webengine 中的 Leaflet 时遇到了一些问题。我想用 geoJson 格式可视化 GPS 轨迹。下面的代码清单显示了我目前开发的 HTML 和 JavaScript 代码。

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

<script src="79_SubaruStretch.js"></script>


  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

	var map = L.map('map').setView([48.70, 8.98], 13);
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); //will be our basemap.


function onEachFeature(feature, layer) {
    if (feature.properties) {
        layer.bindPopup("<b>" + feature.properties.phase + "</b> from" + feature.properties.from + " to " + feature.properties.to);
    }
}
//map.tap.disable();

var streets = new L.geoJson(roads, {
		onEachFeature: onEachFeature,
		style: function(feature) { return {color: feature.properties.color}; }
	}).addTo(map);

  </script>
</body>
</html>

当我用 Iceweasel/Firefox 打开这个 HTML 页面时，我可以点击 gps 图，然后会显示弹出窗口。但是，当我在 JavaFX WebEngine 中打开相同的 HTML 页面时，我无法再单击该轨道。下面的代码显示了 JavaFX 应用程序。

public class WebViewSample extends Application {
private Scene scene;
@Override public void start(Stage stage) {
    // create the scene
    stage.setTitle("Web View");
    scene = new Scene(new Browser(),750,500, Color.web("#666970"));
    stage.setScene(scene);
//            scene.getStylesheets().add("webviewsample/BrowserToolbar.css");        
    stage.show();
}

public static void main(String[] args){
    launch(args);
}
}
class Browser extends Region {
final WebView smallView = new WebView();
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();

public Browser() {
    //apply the styles
    getStyleClass().add("browser");
    // load the web page
    webEngine.load("file:///test2.html");
    webEngine.setJavaScriptEnabled(true);

//     webEngine.load("http://openstreetmap.de/karte.html");
    //add the web view to the scene
    getChildren().add(browser);


}
private Node createSpacer() {
    Region spacer = new Region();
    HBox.setHgrow(spacer, Priority.ALWAYS);
    return spacer;
}

@Override protected void layoutChildren() {
    double w = getWidth();
    double h = getHeight();
    layoutInArea(browser,0,0,w,h,0, HPos.CENTER, VPos.CENTER);
}

@Override protected double computePrefWidth(double height) {
    return 750;
}

@Override protected double computePrefHeight(double width) {
    return 500;
}
}

当我在 Iceweasel 中将光标定位在轨道上时，光标会发生变化并显示该轨道是可点击的。在 JavaFX 网络引擎中，无论鼠标是否位于轨道上，光标始终显示可点击符号。有人知道如何解决这个问题吗？

编辑（2015-07-10）： 我认为网络引擎在确定点击绘制的路径时存在问题。我添加了一个在点击地图时打开警报的方法：

map.on('click', function(){
        alert("map clicked");
    });

这对我来说很好。但是路径的相同功能不起作用：

streets.on('click', function(e){
   alert(e.layer.feature.properties.phase);
});

我还在 JavaFX 网络引擎中添加了一个 AlertHandler。

【问题讨论】：

标签： java javafx onclick leaflet javafx-webengine

【解决方案1】：

也许您尝试处理浏览器类上的鼠标点击。在我看来，JavaFx 似乎确实阻止了任何鼠标点击，所以你不能点击任何地方。

我在您的浏览器类中添加了一些处理内容。也许它有效。

public Browser() {
    //apply the styles
    getStyleClass().add("browser");
    // load the web page
    webEngine.load("file:///test2.html");
    webEngine.setJavaScriptEnabled(true);

    //webEngine.load("http://openstreetmap.de/karte.html");
    //add the web view to the scene
    getChildren().add(browser);

    //clickevent
            this.setOnMouseClicked(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent event){
                onActionProperty().get().handle(event);
            }

        });


    }

/**
 * MouseHandler
 */
private ObjectProperty<EventHandler<MouseEvent>> propertyOnAction = new SimpleObjectProperty<EventHandler<MouseEvent>>();

public final ObjectProperty<EventHandler<MouseEvent>> onActionProperty() {
    return propertyOnAction;
}

public final void setOnAction(EventHandler<MouseEvent> handler) {
    propertyOnAction.set(handler);
}

public final EventHandler<MouseEvent> getOnAction() {
    return propertyOnAction.get();

}    


private Node createSpacer() {
    Region spacer = new Region();
    HBox.setHgrow(spacer, Priority.ALWAYS);
    return spacer;
}

@Override protected void layoutChildren() {
    double w = getWidth();
    double h = getHeight();
    layoutInArea(browser,0,0,w,h,0, HPos.CENTER, VPos.CENTER);
}

@Override protected double computePrefWidth(double height) {
    return 750;
}

@Override protected double computePrefHeight(double width) {
    return 500;
}

【讨论】：