Map-Matching

Ab Version 3.7 unterstützt SmartMaps die Funktionalität des Map-Matching. Dabei wird eine Route auf Basis einzelner Wegpunkte berechnet. In diesem Beispiel können die einzelnen Zwischenstationen durch Klicken auf die Karte simuliert werden. Das Beispiel ist vollständig; Sie können es lokal in einer Datei speichern und im Browser öffnen. Sie müssen lediglich den Wert für apiKey ersetzen.

Anleitung: Klicken Sie auf die Karte und erstellen Sie mindestens zwei Wegpunkte, um die Match-Routing-Berechnung für die ausgewählten Punkte auszulösen. Achten Sie darauf, dass die Punkte möglichst nah am Straßennetz liegen. Das Routing erfolgt mit dem neuen Match-Routing im Auto-Profil.

<!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="Waypoints"
        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=[INSERT API-KEY]"></script>
  <script>
    ym.ready(function (modules) {
        // Define text field to be able to display waypoints:
        var waypointsInputTextArea = document.getElementById("waypointsInput");

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

        // Initialise GeoJSON layer for match routing and draw on map
        var matchLayer = ym.geoJson();
        matchLayer.addTo(map);

        var waypointsLayer = ym.geoJson();
        waypointsLayer.addTo(map);

        // When adding data to GeoJSON layer, align map to route
        matchLayer.on("add", (e) => {
          if (!map.getBounds().contains(matchLayer.getBounds())) {
            map.fitBounds(matchLayer.getBounds());
          }
        });

        // Initialise match routing for map matching
        var matchRouting = new ym.services.MatchRouting();

        // Draw match routing in case of successful query
        matchRouting.on("success", function (request, response) {
          console.log(response);
          matchLayer.clearLayers();
          matchLayer.addData(response.body);
        });

        // Initialise list for waypoints
        var waypoints = [];

        // Perform map matching when clicking on the map
        map.on("click", function (e) {
          // Determine coordinate of waypoint and draw marker on map
          var latlng = e.latlng;
          var marker = ym.marker(latlng).addTo(waypointsLayer);

          // Add waypoint and calculate the route from at least two waypoints
          waypoints.push([latlng.lng, latlng.lat]);
          waypointsInputTextArea.value = JSON.stringify(waypoints);
          if (waypoints.length >= 2) {
            matchRouting.calcRoute(waypoints);
          }
        });
    });
  </script>
</body>
</html>

Ersetzen Sie UiyzEGkdM%2BG8mHu6In3%2FN4YnV7PahFDug8mIud3HzARrYl7Yq%2FTpkgvfSN3XuNq%2F durch Ihren tatsächlichen API-Key, um das Beispiel lokal zu testen.