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( 'https://wxs.ign.fr/essentiels/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&format=image/png&style=normal', { minZoom: 0, maxZoom: 18, tileSize: 256 }).addTo(map); var infoDiv = document.getElementById("info"); infoDiv.innerHTML = "<p> Bibliothèque d'accès version " + Gp.servicesVersion + " (" + Gp.servicesDate + ")</p>";
<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>
#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; }