2

JavaFX Webengine の Leaflet に問題があります。GPS トラックを geoJson 形式で視覚化したいと考えています。以下のコード リストは、これまでに開発した 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>

この HTML ページを Iceweasel/Firefox で開くと、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 Web エンジンでは、マウスがトラック上にあるかどうかに関係なく、カーソルは常にクリック可能なシンボルを表示します。この問題を解決する方法を知っている人はいますか?

編集 (2015-07-10): Web エンジンには、描画されたパスのクリックを判断するのに問題があると思います。マップがクリックされたときにアラートを開くメソッドを追加しました。

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

これは私にとってはうまくいきます。しかし、パスの同じ機能は機能しません:

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

また、AlertHandler を JavaFX Web エンジンに追加しました。

4

1 に答える 1

0

おそらく、Browser クラスでマウスクリックを処理しようとするでしょう。私には、JavaFx がマウスクリックをブロックしているように見えるので、どこもクリックできません。

Browser クラスにいくつかの処理を追加しました。多分それはうまくいきます。 

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;
}
于 2015-07-10T07:34:49.640 に答える