Map Matching

SmartMaps unterstützt ab Version 3.7 die Funktionalität des Map Matching. Dieses erstellt auf Basis einzelner Wegpunkte einen Routenverlauf. In diesem Beispiel können durch Klick auf die Karte die einzelnen Zwischenstandorte simuliert werden.

Das Beispiel ist vollständig; Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey ersetzen.

Klicken Sie auf die Karte und erzeugen Sie mindestens zwei Wegpunkte, um die Berechnung des Match-Routings für die gewählten Punkte auszulösen. Achten Sie dabei darauf, dass die Punkte möglichst in der Nähe des Straßennetzes befinden. Für die Berechnung wird das Auto-Routing mit dem neuen Match-Routing verwendet.

SmartMaps-Karte

+-
SmartMaps | Leaflet Map data © OpenStreetMap

Codebeispiel: Map Matching

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Map Matching</title>
</head>

<body>
  <div id="map-wrapper">
      <div id="waypoints">
        <textarea
          id="waypointsInput"
          placeholder="Wegpunkte"
          rows="10"
          readonly
        ></textarea>
        <span id="waypointsInputLabel"></span>
      </div>
      <div id="map" style="height: 350px;"></div>
   </div>

  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>
  <script>
    ym.ready(function (modules) {
        //Textfeld bestimmen, um Wegpunkte darstellen zu können:
        var waypointsInputTextArea = document.getElementById("waypointsInput");

        //Karte initialisieren
        var map = ym.map("map", {
          center: [49.02166, 8.43942],
          zoom: 17,
        });

        //GeoJSON Layer für Match-Routing initalisieren und in Karte einzeichnen
        var matchLayer = ym.geoJson();
        matchLayer.addTo(map);

        //GeoJSON Layer für Wegpunkte initalisieren und in Karte einzeichnen
        var waypointsLayer = ym.geoJson();
        waypointsLayer.addTo(map);

        //Wenn Daten zu GeoJSON Layer hinzugefügt werden, Karte an Route ausrichten
        matchLayer.on("add", (e) => {
          if (!map.getBounds().contains(matchLayer.getBounds())) {
            map.fitBounds(matchLayer.getBounds());
          }
        });

        //Match-Routing für das Map Matching initalisieren
        var matchRouting = new ym.services.MatchRouting();

        //Match-Routing bei erfolgreicher Abfrage einzeichnen
        matchRouting.on("success", function (request, response) {
          console.log(response);
          matchLayer.clearLayers();
          matchLayer.addData(response.body);
        });

        //Liste für Wegpunkte initialisieren
        var waypoints = [];

        //Match-Routing bei Click auf Karte berechnen
        map.on("click", function (e) {
          //Koordinate des Wegpunkts bestimmen und Marker in Karte einzeichnen
          var latlng = e.latlng;
          var marker = ym.marker(latlng).addTo(waypointsLayer);

          //Wegpunkt hinzufügen und ab mind. zwei Wegpunkten das Matching berechnen
          waypoints.push([latlng.lng, latlng.lat]);
          waypointsInputTextArea.value = JSON.stringify(waypoints);
          if (waypoints.length >= 2) {
            matchRouting.calcRoute(waypoints);
          }
        });
    });
  </script>
</body>
</html>