#1 Mon 28 August 2017 13:09
- olifil-at2com
- Juste Inscrit !
- Date d'inscription: 28 Aug 2017
- Messages: 2
L.featureGroup.getBounds()
Bonjour à tous,
Avec leaflet 1.2 intégré dans une vue twig de Symfony 2.8, j'essaye de récupérer les bounds d'un groupe de geoJsonLayer.
1. Je crée un layer de type L.featureGroup
2. Depuis une boucle, je récupère chacun de mes geoJson (geometrie:polygon), que j'ajoute individuellement à mon featureGroup.
3. J'ajoute mon featureGroup à la carte (tous mes geoJson s'affichent).
4. J'obtiens le message 'Bounds are not valid' lorsque j'essai de centrer ma carte sur featureGroup.getBound().
Mon code en résumé pourrait-être :
Code:
../ var communesGeojson = L.FeatureGroup(); {% for commune in territory.communes %} $.getJSON( link, function( data ){ commune.geojson = L.geoJson( data ) .on( 'click', function(e) {map.fitBounds( commune.geojson.getBounds() ) } ) // La carte se recentre au click sur le polygone .addTo( communesGeojson ); }); {% endfor %} communesGeojson.addTo(map); map.fitBounds(communesGeojson.getBounds()); // La carte sur le featureGroup ne se recentre pas /..
En vous remerciant par avance.
Hors ligne
#2 Tue 29 August 2017 23:42
- Damien BEAUSEIGNEUR
- Participant assidu
- Lieu: meyzieu
- Date d'inscription: 5 Sep 2005
- Messages: 425
Re: L.featureGroup.getBounds()
Bonjour,
outre le fait qu'il est plus facile de lire sur le code réel vu qu'il s'agit de script js. (code source de la page?)
Que renvoie communesGeojson.getBounds() ? une valeur undefined un null? Et je parle en réel.
Est-ce qu'il marche avec une seule commune?
cordialement
Hors ligne
#3 Mon 04 September 2017 11:24
- olifil-at2com
- Juste Inscrit !
- Date d'inscription: 28 Aug 2017
- Messages: 2
Re: L.featureGroup.getBounds()
Bonjour et merci pour la réponse.
Code:
map.fitBounds(commune.getBounds())
est fonctionnel puisque au clic sur l'une des communes la carte se recentre et le zoom s'effectue sur le commune sélectionnée.
C'est au niveau de la collection que je rencontre un souci.
Lors de l'appel la console me retourne : Uncaught Error: Bounds are not valid.
Le code complet (les valeurs entre {%%} et {{}} sont des balises twig):
Code:
// Valeurs par défaut var defaultColor = "#9bbd33"; var defaultFillOpacity = 0.3; var hightlightColor = "silver"; // Définition des icones de makers var communeIcon = L.divIcon({ className: 'communeIcon', iconSize: [26, 32], // size of the icon iconAnchor: [13, 32], // point of the icon which will correspond to marker's location popupAnchor: [0, -32] // point from which the popup should open relative to the iconAnchor }); var pointIcon = L.divIcon({ className: 'pointIcon', iconSize: [28, 37], // size of the icon iconAnchor: [13, 32], // point of the icon which will correspond to marker's location popupAnchor: [0, -32] // point from which the popup should open relative to the iconAnchor }); var communes = []; var communesGeojson = new L.FeatureGroup(); var map = { map: L.map('map').setView([{{ territory.communeReference.latitude }}, {{ territory.communeReference.longitude }}], 13), setFrameIndex: function() { $('.frame-body').html($('#indexTemplate').html()); }, communeMarkerClick: function(event, commune) { event.target.closePopup(); // On teste si map.activeCommune est définie if (map.activeCommune != null) { // Si oui on désactive l'activeCommune actuelle map.unsetActiveCommune(); } // Activation de la commune map.setActiveCommune(commune); }, setActiveCommune: function(commune) { //On défini la commune active this.activeCommune = commune; // Zoome et recentre la carte sur la commune this.map.fitBounds(commune.bounds); // Modification des options du layer commune.geoJSON.setStyle({ fillOpacity: 0, weight: 2 }); // On masque le marqueur de la commune $(commune.marker._icon).hide(); // On ajoute les points d'arrêts à la carte commune.markers.addTo(this.map); // Ajout du nom de la commune dans la Frame $('.frame-body').html("<h2 title=\"Nom de la commune\">" + commune.nom + " <small title=\"Nombre de points d'arrêts\">(" + commune.nbr_points + ")</small></h2><div class=\"point-detail\"></div>"); }, unsetActiveCommune: function () { // Modification des options du layer this.activeCommune.geoJSON.setStyle({ fillOpacity: defaultFillOpacity, weight: 0 }); // On supprime les points d'arrêts de la carte this.activeCommune.markers.removeFrom(this.map); // On affiche le marker de la commune $(this.activeCommune.marker._icon).show(); // On supprime la référence activeCommune this.activeCommune = null; } }; L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map.map); {% for commune in territory.communes %} var commune_{{ commune.codeCommune }} = { id: {{ commune.codeCommune }}, nom: '{{ commune.nom }}', nbr_points : {{ commune.pointsarret|length }}, visible: true, active : false }; communeIcon.options.html = commune_{{ commune.codeCommune }}.nbr_points; // On affiche les limites de chaque communes var link = "{{ asset('cartographie/') ~ commune.codeDepartement.id ~ '/' ~ commune.codeCommune ~ '.geojson' }}"; $.getJSON( link, function(data){ commune_{{ commune.codeCommune }}.geoJSON = L.geoJson( data, { fillColor: defaultColor, color: "#5b5b5b", dashArray: "10 15", weight: 0, fillOpacity: defaultFillOpacity } ) .on('mouseover', function(event){ if (commune_{{ commune.codeCommune }}.active == false ) { event.target .setStyle({ fillColor: hightlightColor }) .openPopup(); } }) .on('mouseout', function(event){ event.target .setStyle({ fillColor: defaultColor }) .closePopup(); }) .on('click', function(event){ map.communeMarkerClick(event, commune_{{ commune.codeCommune }}); }) .bindPopup('<h2>{{ commune.nom }}</h2>', { closeButton: false, className: "communePopup" }) .addTo(communesGeojson); commune_{{ commune.codeCommune }}.bounds = commune_{{ commune.codeCommune }}.geoJSON.getBounds(); }); // On affiche le marqueur de la commune courante commune_{{ commune.codeCommune }}.marker = L.marker([{{ commune.latitude }}, {{ commune.longitude }}], {icon: communeIcon}) .on('click', function(event){ map.communeMarkerClick(event, commune_{{ commune.codeCommune }}) }) .addTo(map.map); // On ajoute la commune courante à la couche des communes communes.push(commune_{{ commune.codeCommune }}); commune_{{ commune.codeCommune }}.markers = new L.LayerGroup(); // On affiche les points d'arrêt de la commune {% for point in commune.pointsArret %} var marker_{{ point.id }} = { id: {{ point.id }}, nom: "{{ point.nom }}", adresse: {% if point.adresse1 is empty %}false{% else %}"{{ point.adresse1 }}"{% endif %}, directions: {% if point.direction is empty %}false{% else %}"{% for direction in point.direction %}{% if direction is not empty %}<li>{{ direction }}</li>{% endif %}{% endfor %}"{% endif %}, asAbribus: {% if point.asAbribus %}"{{ asset('bundles/main/imgs/pictos-amenagements/abribus.png') }}"{% else %}false{% endif %}, asBanc: {% if point.asBanc %}"{{ asset('bundles/main/imgs/pictos-amenagements/banc.png') }}"{% else %}false{% endif %}, asParcvelo: {% if point.asParcvelo %}"{{ asset('bundles/main/imgs/pictos-amenagements/parc-velo.png') }}"{% else %}false{% endif %}, latitude: {{ point.latitude }}, longitude: {{ point.longitude }} }; marker_{{ point.id }}.geo = L.marker([{{ point.latitude }}, {{ point.longitude }}], {icon: pointIcon}).addTo(commune_{{ commune.codeCommune }}.markers) .bindPopup('{{ point.nom }}', { closeButton: false, className: 'pointPopup' }) .on('mouseover', function(event){ event.target.openPopup(); }) .on('click', function(event){ // On affiche les données du point var html; html = "<h3 title=\"Nom du point d'arrêt\">"+ marker_{{ point.id }}.nom +"</h3>"; if ( marker_{{ point.id }}.adresse != false ) { html += "<h4 class=\"address\">Adresse</h4>"; html += "<p>"+ marker_{{ point.id }}.adresse +"</p>"; } if ( marker_{{ point.id }}.directions != false ) { html += "<h4 class=\"direction\">Directions</h4>"; html += "<ul>"+ marker_{{ point.id }}.directions +"</ul>"; } if ( marker_{{ point.id }}.asAbribus || marker_{{ point.id }}.asBanc || marker_{{ point.id }}.asParcvelo ) { html += "<h4 class=\"amenagement\">Aménagements</h4><p>"; if ( marker_{{ point.id }}.asAbribus ) { html += "<img src=\""+ marker_{{ point.id }}.asAbribus +"\" alt=\"Rezopouce Picto Abribus\" title=\"Présence d'un abribus\" /> " } if ( marker_{{ point.id }}.asBanc ) { html += "<img src=\""+ marker_{{ point.id }}.asBanc +"\" alt=\"Rezopouce Picto Banc\" title=\"Présence d'un banc\" /> " } if ( marker_{{ point.id }}.asParcvelo ) { html += "<img src=\""+ marker_{{ point.id }}.asParcvelo +"\" alt=\"Rezopouce Picto Parc-vélos\" title=\"Présence d'un parc-vélos\" /> " } // Désactive une commune html +="</p>"; } html += "<h4 class=\"geoloc\">Géolocalisation</h4>"; html += "<p>Lat : "+ {{ point.latitude }} + " | Long : " + {{ point.longitude }} +"</p>"; // Affichage du point $('.frame-body .point-detail').html(html); }); {% endfor %} {% endfor %} // On affiche le calque des communes communesGeojson.addTo(map.map); map.map.fitBounds(communesGeojson.getBounds()); map.map.on('click', function(){ map.unsetActiveCommune(); $('.frame-body').html($('#indexTemplate').html()); }); $(document).ready(function(){ map.setFrameIndex(); })
Hors ligne
#4 Mon 04 September 2017 19:11
- Damien BEAUSEIGNEUR
- Participant assidu
- Lieu: meyzieu
- Date d'inscription: 5 Sep 2005
- Messages: 425
Re: L.featureGroup.getBounds()
Bonjour
Ok je ne vois que 2 choses, un problème dans les données ou un bug leaflet.
Vu que tu récupère dans ton code les bounds de chaque commune
Code:
commune_{{ commune.codeCommune }}.bounds = commune_{{ commune.codeCommune }}.geoJSON.getBounds();
génère toi même le bound de communesGeojson.
sur le principe:
var communesGeojson = new L.FeatureGroup();
var communeBounds;
...
commune_{{ commune.codeCommune }}.bounds = commune_{{ commune.codeCommune }}.geoJSON.getBounds();
Code:
if (typeof communeBounds === 'undefined') { // pour la premiere commune communeBounds = commune_{{ commune.codeCommune }}.geoJSON.getBounds(); } else { // pour les suivantes communeBounds.extend(commune_{{ commune.codeCommune }}.geoJSON.getBounds()); }
communeBounds devrait contenir les limites que tu recherches, mais si c'est une problème sur les données alors là cela ne solutionnera pas ton problème.
cordialement
Hors ligne