JavaFx webview, bing maps не панорамируется - PullRequest
Новая
       11

JavaFx webview, bing maps не панорамируется

0 голосов
/ 25 января 2019

Я хочу использовать Bing Maps в JavaFx WebView, но панорамирование с помощью мыши не работает, окно карты реагирует совершенно странно на панорамирование ввода.

Я собрал некоторые другие картографические сервисы для сравнения.Поскольку Bing Maps, очевидно, работает со всеми обычными браузерами, что не так при использовании в веб-просмотре?

Windows 10, Java 1.8.0_201 

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class JavaFXMaps extends Application {

    @Override
    public void start(Stage primaryStage) {
        ComboBox <String> selector = new ComboBox <String> (FXCollections.observableArrayList(
                "TestBing.html", "TestGoogle.html", "TestHere.html", "TestLeaflet.html", "TestOpenLayers.html"));

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.setJavaScriptEnabled(true);
        selector.setOnAction(event -> webEngine.load(getClass().getResource(selector.getValue()).toExternalForm()));

        VBox vb = new VBox(selector, webView);
        VBox.setVgrow(webView, Priority.ALWAYS);
        Scene scene = new Scene(vb, 700, 500);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

TestHere.html: 

<!DOCTYPE html>
<html>
<head>
    <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript"></script>
    <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript"></script>
    <script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; width: 100%; margin: 0; padding: 0 }
      #mapContainer { height: 100% }
    </style>
</head>

<body>
    <div id="mapContainer"></div>
    <script>
        var platform = new H.service.Platform({
            'app_id': 'your_key',
            'app_code': 'your_key'
        });
        var defaultLayers = platform.createDefaultLayers();
        var map = new H.Map(document.getElementById('mapContainer'), defaultLayers.normal.map, {
            zoom: 10,
            center: { lng: 13.4, lat: 52.51 }
        });
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
        var ui = H.ui.UI.createDefault(map, defaultLayers);

        //strangely without the following lines the map area does not follow resizing, but ui elements do
        window.addEventListener('resize', function () {
            map.getViewPort().resize(); 
        });
    </script>
</body>
</html>

TestLeaflet.html 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
        <style>
            #map {
                height: 100%;
            }
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([48.70, 8.98], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=your_key', {
            maxZoom: 18,
            id: 'mapbox.streets'
        }).addTo(map);

        // OpenStreetMap: http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
    </script>
</body>
</html>

TestBing.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map { height: 100% }
</style>
</head>

<body>
    <div id="map"></div>
    <script type='text/javascript'>

    function GetMap() {
        new Microsoft.Maps.Map('#map', {
            credentials: 'your_key',
            disableMapTypeSelectorMouseOver: true,
        });
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</body>
</html>

TestGoogle.html 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=your_key&sensor=false">
    </script>

    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }
    </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

TestOpenLayers.html 

<!DOCTYPE html>
<html>
  <head>
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #mapdiv { height: 100% }
    </style>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
    <div id="mapdiv" class="map"></div>
    <script>

        var map = new ol.Map({
        target: 'mapdiv',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([-0.09, 51.505]),
            zoom: 12
        })
        });
    </script>
</body>

</html>
...