banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

#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: '&copy; <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\" />&nbsp;"
                    }
                    if ( marker_{{ point.id }}.asBanc ) {
                        html += "<img src=\""+ marker_{{ point.id }}.asBanc +"\" alt=\"Rezopouce Picto Banc\" title=\"Présence d'un banc\" />&nbsp;"
                    }
                    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\" />&nbsp;"
                    }

// 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

 

Pied de page des forums

Powered by FluxBB