14 Aug
2020
14 Aug
'20
12:53 a.m.
Message posté par : vistel237 (vtchako99(a)gmail.com)
----------------------------------------
bonjour alors voilas je travaille sur un projet de classe ou il m'ai demander de
calculer des itinéraire a partir de ma localisation alors après avoir chercher j'ai
trouver la librairie Leaflet Routing Machine qui permet de determiner des itinéraire
seulement voila je crois qu'il mâche avec des données de openstreetmap et il ne permet
pas de prendre ma position actuel comme point de depart parce-que quand j'ajoute le
L.control.locate().addTo(map);
la machine de routaage disparait alors que j'ai déjà ajouter les librairie cdnj dans
le html alors voici mes question:
1- comment faire en sorte qu'il prenne en compte ma localisation comme point de
part?????
2-comment faire ensorte que la librairie deter mine des itineraire meme avec des donnees
stocker dans geoserver???
merci pour vos reponce et je laisse mon code a disposition:
HTML
-----------------
Code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap…
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<!-- Fichiers CSS -->
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Ces deux balises link sont à insérer entre les deux balises existantes
-->
<link rel="stylesheet"
href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder…
/>
<link rel="stylesheet"
href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-ro…
/>
<link rel="stylesheet" href="css/Stile.css">
</head>
<body>
<!-- cdn pour la localisation-->
<script
src='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.…
<link
href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0…
rel='stylesheet' />
<link
href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0…
rel='stylesheet' />
<!-- cdn pour les glifIcon-->
<link
href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0…
rel='stylesheet' />
<!-- cdn pour le plein ecrant-->
<script
src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1…
<link
href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.…
rel='stylesheet' />
<div id="bandeau">
<div id="titre">Leaflet.js / Master SIGAT</div>
</div>
<div id="cadre">
<div id="encart">
<form acttion="index.php" method="Post">
<div class="form-row">
<div class="form-group col-md-6">
<label for="nom">Nom du Point</label>
<input type="text" name="nom"
class="form-control" id="name" placeholder="nom du
point">
</div>
<div class="form-group col-md-6">
<label for="Longitude">Longitude</label>
<input type="number" name="long"
class="form-control" id="Longitude" placeholder="Longitude du
point">
</div>
</div>
<div class="form-group">
<label for="Latitude">Latitude</label>
<input type="number" name="lat"
class="form-control" id="Latitude" placeholder="latitude du
point">
</div>
<button type="submit" class="btn
btn-primary">Valider</button>
</form>
</div>
<div id="map"></div>
</div>
</div>
<!-- Fichiers JS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Ces deux balises script sont à insérer entre les deux balises existantes
-->
<script
src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.…
<script
src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-rou…
<script src="js/Stile.js"></script>
</body>
</html>
-----------------
CSS
-----------------
Code :
#bandeau {
width:100%;
height:50px;
background-color:#222222;}
#titre {color: #FFFFFF;
font-size: 20px;
font-weight: bold;
position: absolute;
left: 100px;
Top: 3%;
font-family: Georgia, "Times New Roman", Times, serif;}
#cadre{
width: 100%;
height: 597px;
margin-right: auto;
margin-left: auto;
background-color: #252830;
}
#encart{
width: 30%;
height: 100%;
float: left;
}
#map{
width: 70%;
height: 100%;
}
-----------------
JS
-----------------
Code :
// On s'assure que la page est chargée
window.onload = function(){
// On initialise la carte sur les coordonnée du cameroun
// Initialiser la carte
var map = L.map('map', {
center: [7.9, 13.02],
zoom: 6 });
// On charge les tuiles depuis un serveur au choix, ici OpenStreetMap France
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map) ;
//ajouter des fonds de carte
var baselayers = {
OSM: L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')ng'),
ESRI:
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_…x}'),
openTopo:
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png')ng'),
Forest:
L.tileLayer('https://dev.{s}.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png'),
velo:
L.tileLayer('http://tile.thunderforest.com/cycle/${z}/${x}/${y}.png'…
};baselayers.OSM.addTo(map);
//ajouter une couche wsf
var Cadastre = L.tileLayer.wms('http://localhost:8080/geoserver/yaounde/wms',
{layers: 'yaounde:yde',
format: 'image/png',
transparent: true
});
var National = L.tileLayer.wms('http://localhost:8080/geoserver/yaounde/wms',
{layers: 'yaounde:national',
format: 'image/png',
transparent: true
});
var Point = L.tileLayer.wms('http://localhost:8080/geoserver/yaounde/wms',
{layers: 'yaounde:monument historique',
format: 'image/png',
transparent: true
});
ms_url="http://localhost:8080/geoserver/yaounde/wms";
function Identify(e)
{
// set parameters needed for GetFeatureInfo WMS request
var BBOX = map.getBounds().toBBoxString();
var WIDTH = map.getSize().x;
var HEIGHT = map.getSize().y;
var X = map.layerPointToContainerPoint(e.layerPoint).x;
var Y = map.layerPointToContainerPoint(e.layerPoint).y;
// compose the URL for the request
var URL = ms_url +
'SERVICE=WMS&VERSION=1.1.0&REQUEST=GetFeatureInfo&LAYERS=yaounde:yde&QUERY_LAYERS=yaounde:yde&BBOX='+BBOX+'&FEATURE_COUNT=1&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&INFO_FORMAT=text%2Fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;
//send the asynchronous HTTP request using jQuery $.ajax
$.ajax({
url: URL,
dataType: "html",
type: "GET",
success: function(data)
{
var popup = new L.Popup
({
maxWidth: 300
});
popup.setContent(data);
popup.setLatLng(e.latlng);
map.openPopup(popup);
}
});
}
map.on('click', Identify);
var marqueurs ={"Yaounde": Cadastre,"Point": Point,"Route
Nationnale":National};
//controleur de couche
L.control.layers(baselayers, marqueurs).addTo(map);
//ajouter l'echelle
L.control.scale().addTo(map);
// Cette méthode est à insérer juste après avoir initialisé la carte
L.Routing.control({
//position: 'bottomleft',
// Nous personnalisons le tracé
lineOptions: {
styles: [{color: '#ff8f00', opacity: 1, weight: 7}]
},
// Nous personnalisons la langue et le moyen de transport
router: new L.Routing.osrmv1({
language: 'fr',
profile: 'car', // car, bike, foot
}),
geocoder: L.Control.Geocoder.nominatim()
}).addTo(map)
}
-----------------
----------------------------------------
Le message est situé https://georezo.net/forum/viewtopic.php?pid=334837#p334837
Pour y répondre : webmapping(a)ml.georezo.net ou reply de votre messagerie
Pour vous désabonner connectez-vous sur le forum puis Profil / Abonnement
--
Association GeoRezo - le portail géomatique
https://georezo.net
.addTo(map)){kind=link}
){kind=link}
){kind=link}
){kind=link}