Bibliothèque d'accès : Calcul d'itinéraire visu Leaflet

Utilisation de Gp.Services.route() avec visualisation du résultat avec Leaflet.

by Géoportail IGNF

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://ignf.github.io/geoportal-access-lib/latest/dist/GpServices.js"></script>
<div id="params">
  <p>
    lon départ:
    <input type="text" id="lon1" size="10" /> lat départ :
    <input type="text" id="lat1" size="10" />
  </p>
  <p>
    lon inter :
    <input type="text" id="lon2" size="10" /> lat inter :
    <input type="text" id="lat2" size="10" />
  </p>
  <p>
    lon arrivée:
    <input type="text" id="lon3" size="10" /> lat arrivée :
    <input type="text" id="lat3" size="10" />
  </p>
  <p> Eviter :
    <input type="checkbox" value="true" id="toll"> péages
    <input type="checkbox" value="true" id="bridge"> ponts
    <input type="checkbox" value="true" id="tunnel"> tunnels
  </p>
  <p>Graphe :
    <select id="graph">
      <option value="Pieton">Piéton</option>
      <option value="Voiture">Voiture</option>
    </select>
    Methode de calcul :
    <select id="method">
      <option value="fastest">le plus rapide</option>
      <option value="shortest">le plus court</option>
    </select>
  </p>
</div>
<div id="go">
  <input type="button" value="Itinéraire" onclick="go()" />
</div>
<div id="map"></div>
<div id="result"></div>
<div id="info"></div>

CSS

#params {
  width: 100%;
  height: 200px;
  box-shadow: 0 0 10px #999;
  font-family: monospace;
  padding: 5px;
}

#go {
  padding: 5px;
  float: center;
  width: 100%;
  height: 30px;
}

#result {
  padding: 5px;
  width: 100%;
  height: 200px;
  box-shadow: 0 0 10px #999;
  font-family: monospace;
  overflow: scroll;
}

#map {
  padding: 5px;
  width: 100%;
  height: 300px;
  box-shadow: 0 0 10px #999;
}

#info {
  padding: 5px;
  width: 100%;
  height: 20px;
  font-family: monospace;
}

JavaScript

var map = null; // carte leaflet pour affichage

function go() {
  var lon1 = document.getElementById("lon1").value;
  var lat1 = document.getElementById("lat1").value;
  var lon2 = document.getElementById("lon2").value;
  var lat2 = document.getElementById("lat2").value;
  var lon3 = document.getElementById("lon3").value;
  var lat3 = document.getElementById("lat3").value;
  var avoidFeatures = [];
  var noToll = document.getElementById("toll").checked;
  if (noToll) avoidFeatures.push("toll");
  var noBridge = document.getElementById("bridge").checked;
  if (noBridge) avoidFeatures.push("bridge");
  var noTunnel = document.getElementById("tunnel").checked;
  if (noTunnel) avoidFeatures.push("tunnel");
  var graphIdx = document.getElementById("graph").selectedIndex;
  var graph = document.getElementById("graph").options[graphIdx].value;
  var methodIdx = document.getElementById("method").selectedIndex;
  var method = document.getElementById("method").options[methodIdx].value;
  var resultDiv = document.getElementById("result");
  try {
    Gp.Services.route({
      startPoint: {
        x: lon1,
        y: lat1
      },
      endPoint: {
        x: lon3,
        y: lat3
      },
      viaPoints: [{
        x: lon2,
        y: lat2
      }],
      graph: graph,
      avoidFeature: avoidFeatures,
      routePreference: method,
      apiKey: "calcul",
      onSuccess: function(result) {
        resultDiv.innerHTML = "<p>" + JSON.stringify(result) + "</p>";
        // affichage sur la carte
        L.geoJson(result.routeGeometry).addTo(map);
      },
      onFailure: function(error) {
        resultDiv.innerHTML = "<p>" + error + "</p>";
      }
    });
  } catch (e) {
    resultDiv.innerHTML = "<p>" + e + "</p>"
  }
};
map = L.map("map").setView([48.845, 2.424], 5);
L.tileLayer(
 ...