Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

#1 Fri 14 August 2020 00:45

vistel237
Membre
Date d'inscription: 23 Apr 2020
Messages: 10

Leaflet Routing Machine

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.min.css" 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.css" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
                
        <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.43.0/L.Control.Locate.min.js'></script>
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.mapbox.css' rel='stylesheet' />
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.ie.css' rel='stylesheet' />
        <!-- cdn pour les glifIcon-->
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />
        <!-- cdn pour le plein ecrant-->
        <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' 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.js"></script>
        <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>

        <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'),
        ESRI: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'),
        openTopo: L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'),
        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)

}

Hors ligne

 

#2 Fri 14 August 2020 10:29

s10
Membre
Lieu: France
Date d'inscription: 28 Nov 2018
Messages: 19

Re: Leaflet Routing Machine

Salut,

pour récupérer la position comme point de départ modifie dans ton fichier JS ton L.Routing.control en  routingControl = L.Routing.control({

et a la fin de ton JS tu peux rajouter

Code:

 
// demande à ton navigateur d'accéder à ta position (si tu change le setView à true ca zoomera dessus d'ailleurs).
map.locate({setView: false, watch: true, maxZoom: 17});

// ne fera qu'une fois l'évenement (once sinon change en on) sur l'évenement location found il rajoute dans ton intinéraire ta position actuelle
map.once('locationfound', function(ev){
  routingControl.setWaypoints(ev.latlng);
 
    });

pour le reste de ta question, je ne sais pas.

Hors ligne

 

#3 Fri 14 August 2020 18:34

vistel237
Membre
Date d'inscription: 23 Apr 2020
Messages: 10

Re: Leaflet Routing Machine

s10 a écrit:

Salut,

pour récupérer la position comme point de départ modifie dans ton fichier JS ton L.Routing.control en  routingControl = L.Routing.control({

et a la fin de ton JS tu peux rajouter

Code:

 
// demande à ton navigateur d'accéder à ta position (si tu change le setView à true ca zoomera dessus d'ailleurs).
map.locate({setView: false, watch: true, maxZoom: 17});

// ne fera qu'une fois l'évenement (once sinon change en on) sur l'évenement location found il rajoute dans ton intinéraire ta position actuelle
map.once('locationfound', function(ev){
  routingControl.setWaypoints(ev.latlng);
 
    });

pour le reste de ta question, je ne sais pas.


Merci pour ta répondrais désolé je débute en JS alors pourrais tu me mettre les modifications directement dans mon code pour que je puisse mieux comprendre vue que j'ai essayé et sa n'as pas marché et je voudrais savoir le routingControle c'est ou variable? Merci d'avance pour la réponse

Hors ligne

 

#4 Mon 17 August 2020 09:26

s10
Membre
Lieu: France
Date d'inscription: 28 Nov 2018
Messages: 19

Re: Leaflet Routing Machine

Salut tu peux essayer ça : https://codepen.io/s10geo/pen/ExKPzEP

Hors ligne

 

#5 Mon 17 August 2020 10:09

vistel237
Membre
Date d'inscription: 23 Apr 2020
Messages: 10

Re: Leaflet Routing Machine

s10 a écrit:

Salut tu peux essayer ça : https://codepen.io/s10geo/pen/ExKPzEP


merci pour tous c'est super sa marche super bien tu me sauve la vie
je vais pas te déranger plus longtemps voici ma dernière question comment est ce je peut faire pour mettre la localisation dans un bouton donc a tous moment je peut récupérer la position actuel comme point de depart

Hors ligne

 

#6 Mon 17 August 2020 10:16

s10
Membre
Lieu: France
Date d'inscription: 28 Nov 2018
Messages: 19

Re: Leaflet Routing Machine

Tu fais un bouton avec un onclick.
Dans la fonction tu mets un map.locate (comme plus haut). Faut changer également le map.once en map.on (le once ne détecte qu'une fois et le on c'est à chaque fois qu'il détecte l'évenement 'locationfound')

Hors ligne

 

#7 Fri 21 August 2020 00:17

vistel237
Membre
Date d'inscription: 23 Apr 2020
Messages: 10

Re: Leaflet Routing Machine

s10 a écrit:

Tu fais un bouton avec un onclick.
Dans la fonction tu mets un map.locate (comme plus haut). Faut changer également le map.once en map.on (le once ne détecte qu'une fois et le on c'est à chaque fois qu'il détecte l'évenement 'locationfound')


d'acord merci enormement pour tous

Hors ligne

 

#8 Fri 21 August 2020 00:33

vistel237
Membre
Date d'inscription: 23 Apr 2020
Messages: 10

Re: Leaflet Routing Machine

s10 a écrit:

Salut,

pour récupérer la position comme point de départ modifie dans ton fichier JS ton L.Routing.control en  routingControl = L.Routing.control({

et a la fin de ton JS tu peux rajouter

Code:

 
// demande à ton navigateur d'accéder à ta position (si tu change le setView à true ca zoomera dessus d'ailleurs).
map.locate({setView: false, watch: true, maxZoom: 17});

// ne fera qu'une fois l'évenement (once sinon change en on) sur l'évenement location found il rajoute dans ton intinéraire ta position actuelle
map.once('locationfound', function(ev){
  routingControl.setWaypoints(ev.latlng);
 
    });

pour le reste de ta question, je ne sais pas.


pour le reste j'ai trouver une solution passant par un serveur locale du nom de mapstore il a permit a nominating d'interoger les donner de stocker dans mon geoserver
seulement voila j'ai un souci lorsque j'integre la carte produite sur map store e utilisant l'API qu'il me fournit les element de leaflet tel que la routing machine ne se superpose pas decu et meme si je donne id au iframe rien ne change

code html l'api de mapstore est dans le IFRAME

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.min.css" 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.css" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
                
        <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.43.0/L.Control.Locate.min.js'></script>
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.mapbox.css' rel='stylesheet' />
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.ie.css' rel='stylesheet' />
        <!-- cdn pour les glifIcon-->
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />
        <!-- cdn pour le plein ecrant-->
        <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' 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>
                
                <iframe id="map" style="border: none;" width= "100%" height= "100%" src="http://localhost:8082/mapstore/embedded.html#/16"></iframe>

        <!-- 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.js"></script>
        <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>

        <script src="js/Stile.js"></script>
    </body>
</html>

code 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%;
    }


code 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

    //ajouter l'echelle
    L.control.scale().addTo(map);

    // Cette méthode est à insérer juste après avoir initialisé la carte
    routingControl = 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)

   map.locate({setView: false, watch: true, maxZoom: 6});
        map.once('locationfound', function(ev){
  routingControl.setWaypoints(ev.latlng);
    //    marker = L.marker(ev.latlng);
  
    });
}

et voici le rendu cimme vous pouvez le voire en rouge se sont des adresse stocker sur geoserver et la barre de recherche perme d'interoger aussi bien les donne de openstreetmap que les donnees de ma couche geoserverver mais les element de leafletr ne se superpose pas decu merci pour l'aide

Hors ligne

 

Pied de page des forums

Powered by FluxBB

Partagez  |