|
FORUMS PROFESSIONNELS WINDEV, WEBDEV et WINDEV Mobile |
| | | | | |
regroupement de marqueurs dans une carte OpenStreetMap |
Débuté par François SCHAAL, 27 avr. 2018 08:14 - 3 réponses |
| |
| | | |
|
| |
Membre enregistré 1 603 messages Popularité : +64 (70 votes) |
|
Posté le 27 avril 2018 - 08:14 |
| |
| |
| | | |
|
| | |
| |
Membre enregistré 179 messages Popularité : +17 (17 votes) |
|
Posté le 27 avril 2018 - 11:42 |
Bonjour François,
je ne l'avais jamais fait mais je l'ai fait à partir de votre exemple.
Voici le code à mettre dans le code d’initialisation d'une page Webdev.
tabPointsGPS est un tableau de STPosition
ajoutPoint("Stade de la Maladière",46.99526, 6.94411) ajoutPoint("Patinoires du Littoral", 46.99417,6.94432) ajoutPoint("Salle de la Riveraine", 46.99596,6.94662)
MaPage..HTMLEntête = [ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/example/screen.css" /> <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" /> <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" /> <script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script> <script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script> ]
sHTMLFinPage est une chaîne = [ <div id="mapid" style="width: 600px; height: 400px;"></div> <script> var mymap = L.map('mapid').setView([46.99526, 6.94411], 13); L.tileLayer('https: maxZoom: 18, attribution: 'Map Data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-by-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', id: 'mapbox.streets' }).addTo(mymap); var popup = L.popup(); var markers = L.markerClusterGroup(); %1 mymap.addLayer(markers); mymap.on('click', clicAilleursSurLaCarte);
</script> ]
sPointsHTML est une chaîne = ""
POUR i=1 _À_ tabPointsGPS..Occurrence ajoutPointHTML(tabPointsGPS[i]) FIN
sHTMLFinPage = ChaîneConstruit(sHTMLFinPage,sPointsHTML)
MaPage..HTMLFinPage = sHTMLFinPage
PROCEDURE INTERNE ajoutPoint(LOCAL sLibelle est une chaîne, moLat monétaire, moLong monétaire) LOCAL stPos est un STPosition stPos.moLatitude = moLat stPos.moLongitude = moLong stPos.sLibelle = sLibelle tabPointsGPS.Ajoute(stPos) FIN PROCEDURE INTERNE ajoutPointHTML(LOCAL stPos est un STPosition) LOCAL sGabarit est une chaîne = [ var title = "%1"; var marker = L.marker(new L.LatLng(%2, %3), { title: title }); marker.bindPopup(title); markers.addLayer(marker); ] sResultat est une chaîne = ChaîneConstruit(sGabarit, stPos.sLibelle, stPos.moLatitude, stPos.moLongitude) sPointsHTML += [RC]+sResultat FIN
Il faut ajouter ceci dans le code d’initialisation du projet pour que l'exemple soit complet :
STPosition est une structure moLatitude est un monétaire moLongitude est un monétaire sLibelle est une chaîne FIN
Ensuite il ne reste plus qu'à remplir la structure selon vos propres données ! |
| |
| |
| | | |
|
| | |
| |
Membre enregistré 1 603 messages Popularité : +64 (70 votes) |
|
Posté le 02 mai 2018 - 14:19 |
Bonjour Jérôme,
Sincères félicitations et remerciements pour votre contribution
Je n'y suis pas arrivé parce que je tentais d'installer en local les fichiers .js et .css
Pour ceux qui souhaitent intégrer un marqueur avec une icône à partir de son URL et de sa définition donc par l.icon %3 en utilisant le clic sur icône en code navigateur, un exemple de code d'intégration d'un marqueur avec %1 = latitude et %2 longitude avec 5 décimales :
sGabarit = [ var marker = l.marker(new l.LatLng(%1, %2) , {icon: %3}).on('click',clicSurUnObjet); markers.addLayer(marker); ]
un exemple avec 4950 marqueurs pour tester la puissance de OpenStreetMap :
https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-custom.html
Il existe aussi une page avec 50.000 marqueurs.
-- Cordialement François
http://intra.fr http://intrasoftware.fr |
| |
| |
| | | |
|
| | |
| |
Posté le 22 janvier 2019 - 10:02 |
Merci pour ce fabuleux code! ça ma permis d'énormement avancer (sans api ggl bien sur ). Cela dit moi je souhaite afficher sur la carte un ensemble de point qui doivent se présenter lorsque sélectionné une valeur d'un comboBox. Cette liste est issue de la BD. J'ai écrit une procédure affiche_Donnees(cboLocaliteClient) qui s'exécute lorsqu'on selectionne une valeur:
affiche_donnees (wcbo) HLitRecherchePremier(client,idclient,wcbo) TANTQUE PAS HEnDehors(client) ET (client.idLocalite = wcbo) ajoutPoint(client.emplacement,client.latittude,longitude) HLitSuivant(client,idLocalite) gnNBrEnreg=gnNBrEnreg+1 FIN
info(gnNbrEnreg) // retourne bien le nombre d'enregistrement
Mais aucune donnée sur la carte. Nota: cette procédure est appelée à la place de ajoutPoint dans votre code. Je suis sous windev |
| |
| |
| | | |
|
| | | | |
| | |
| | |
| |
|
|
|