Changeset 69451 in spip-zone


Ignore:
Timestamp:
Jan 27, 2013, 5:47:23 PM (7 years ago)
Author:
marcimat@…
Message:

Option du modèle « carte_gis » pour faire du clustering JS côté Client en ajoutant le paramètre cluster=oui.
Un cluster étant un regroupement de points proches géographiquement, dans une case indiquant avec le nombre d'élément regroupés.

On s'appuie pour cela en grande partie du travail de b_b sur GeoDiversité? et sur la lib LeafClusterer? qu'il a adapté là https://github.com/brunob/leafclusterer .

Par ailleurs,

  • Des commentaires en plus
  • Boucle DATA pour les tests sur les args
  • On mutualise le code modifié qui peut l'être entre avec / sans cluster

2 options de plus :

  • clusterMaxZoom=11 pour indiquer que le clustering ne se fait plus à partir de ce niveau de zoom. Par défaut : (maxZoom - 2) (si maxZoom est défini) (à voir si on laisse comme ça ou pas)
  • clusterStyles=#ARRAY... pour modifier les styles des clusters

Ainsi, l'appel suivant fonctionne correctement :
[(#INCLURE{fond=modeles/carte_gis,

objets=articles,
id_rubrique=#ID_RUBRIQUE,
zoom=#CONFIG{gis/zoom},
maxZoom=13,
lat=#CONFIG{gis/lat},
lon=#CONFIG{gis/lon},
hauteur=600px,
controle_type=non,
cluster=non,
clusterStyles=[(#ARRAY{

url,#CHEMIN{images/bg_cluster.png},
height,40,
width,40,
opt_textColor,#ffffff})],

kml=[(#LISTE{

[(#CHEMIN{kml/16.kml}|timestamp|url_absolue)],
[(#CHEMIN{kml/17.kml}|timestamp|url_absolue)],
[(#CHEMIN{kml/86.kml}|timestamp|url_absolue)],
[(#CHEMIN{kml/79.kml}|timestamp|url_absolue)]})]})]

Location:
_plugins_/gis/trunk
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/gis/trunk/modeles/carte_gis.html

    r69442 r69451  
    4646- titre                            titre du point
    4747- description                      description du point
     48
     49Clustering (regroupement de points proches) :
     50- cluster = oui                    Active le clustering
     51- clusterMaxZoom = 11              Regroupe les points jusque à ce zoom, mais pas au delà
     52- clusterStyles = #ARRAY{}         Styles appliqués aux clusters
    4853
    4954]
     
    141146                ]
    142147
     148                // Pour Ajouter l'icone d'un point (feature = item d'un GeoJson)
     149                var setGeoJsonFeatureIcon = function (feature, layer) {
     150                        // Déclarer l'icone du points, si défini
     151                        if (feature.properties && feature.properties.icon){
     152                                layer.setIcon(new L.Icon({
     153                                        iconUrl: feature.properties.icon,
     154                                        iconSize: new L.Point( feature.properties.icon_size\[0\], feature.properties.icon_size\[1\] ),
     155                                        iconAnchor: new L.Point( feature.properties.icon_anchor\[0\], feature.properties.icon_anchor\[1\] )
     156                                }));
     157                        }
     158                }
     159
     160                // Pour Ajouter le texte de popup d'un point (feature = item d'un GeoJson)
     161                var setGeoJsonFeaturePopup = function (feature, layer) {
     162                        // Déclarer le contenu de la popup s'il y en a
     163                        if (feature.properties && (feature.properties.title || feature.properties.description)){
     164                                var popupContent = '';
     165                                if (feature.properties.title)
     166                                        popupContent = '<strong class="title">' + feature.properties.title + '</strong>';
     167                                if (feature.properties.description)
     168                                        popupContent = popupContent + feature.properties.description;
     169                                layer.bindPopup(popupContent);
     170                        }
     171                }
     172
     173                [(#REM)
     174                        Il y a pour le moment 2 façons d'analyser le GeoJson calculé
     175                        en fonction de si on veut faire du clustering (regrouper les points proches)
     176                        ou non. Il y a certainement moyen de regrouper en un seul élément
     177                        la plupart du code, en se passant du js L.geoJson même hors clustering.
     178                        À réfléchir.
     179                ]
     180                <BOUCLE_fonction_analyse_json(CONDITION){si #ENV{cluster}|!={oui}}>
     181                // Analyse des points et déclaration (sans regroupement des points en cluster)
     182                var parseGeoJson = function(data, map) {
     183                        var geojson = new L.geoJson('', {[
     184                                style: (#ENV*{path_styles}|json_encode),
     185                                ]onEachFeature: function (feature, layer) {
     186                                        // Déclarer l'icone du point
     187                                        setGeoJsonFeatureIcon(feature, layer);
     188                                        // Déclarer le contenu de la popup s'il y en a
     189                                        setGeoJsonFeaturePopup(feature, layer);
     190                                }
     191                        }).addTo(map);
     192                        geojson.addData(data);
     193                        [(#ENV{autocenterandzoom,#ENV{centrer_auto}}|oui)
     194                        map.fitBounds(geojson.getBounds());]
     195                }
     196
     197                </BOUCLE_fonction_analyse_json>
     198
     199                // Analyse des points et déclaration (en regroupant les points en cluster)
     200                var parseGeoJson = function(data,map) {
     201                        markers = \[\];
     202                        /* Pour chaque points présents, on crée un marqueur */
     203                        $.each(data.features, function(i, feature) {
     204                                if (feature.geometry.coordinates\[0\]) {
     205                                        var latlng = new L.LatLng(feature.geometry.coordinates\[1\], feature.geometry.coordinates\[0\]);
     206                                        var marker = new L.Marker(latlng);
     207                                        // Déclarer l'icone du point
     208                                        setGeoJsonFeatureIcon(feature, marker);
     209                                        // Déclarer le contenu de la popup s'il y en a
     210                                        setGeoJsonFeaturePopup(feature, marker);
     211
     212                                        marker.id = feature.id;
     213                                        markers.push(marker);
     214                                }
     215                        });
     216
     217                        /* Ajout des marqueurs dans un clustering JS client */
     218                        markerCluster = new L.Marker.Clusterer(map, markers, {[
     219                                maxZoom: (#ENV{clusterMaxZoom, #ENV{maxZoom}|?{#ENV{maxZoom}|moins{2},''}}),][
     220                                styles: \[[(#ENV*{clusterStyles}|json_encode)]\](#ENV*{clusterStyles}|oui)]
     221                        });
     222                }
     223                <//B_fonction_analyse_json>
     224
    143225
    144226                <BOUCLE_definir_les_points_de_la_carte(CONDITION){si #ENV{point}|!={non}}>
     
    153235                jQuery.getJSON("[(#URL_PAGE{gis_json}|url_absolue)]",
    154236                        {[
    155                                 objets : "(#ENV{objets,#ENV{class}}|trim)",][
    156                                 id_objet : (#ENV{args}|?{#ENV{args/id_objet},#ENV{id_objet}}|trim),][
    157                                 id_rubrique : (#ENV{args}|?{#ENV{args/id_rubrique},#ENV{id_rubrique}}|trim),][
    158                                 id_secteur : (#ENV{args}|?{#ENV{args/id_secteur},#ENV{id_secteur}}|trim),][
    159                                 id_parent : (#ENV{args}|?{#ENV{args/id_parent},#ENV{id_parent}}|trim),][
    160                                 id_article : (#ENV{args}|?{#ENV{args/id_article},#ENV{id_article}}|trim),][
    161                                 id_breve : (#ENV{args}|?{#ENV{args/id_breve},#ENV{id_breve}}|trim),][
    162                                 id_document : (#ENV{args}|?{#ENV{args/id_document},#ENV{id_document}}|trim),][
    163                                 media : "(#ENV{args}|?{#ENV{args/media},#ENV{media}}|trim)",][
    164                                 id_mot : (#ENV{args}|?{#ENV{args/id_mot},#ENV{id_mot}}|trim),][
    165                                 id_groupe : (#ENV{args}|?{#ENV{args/id_groupe},#ENV{id_groupe}}|trim),][
    166                                 id_auteur : (#ENV{args}|?{#ENV{args/id_auteur},#ENV{id_auteur}}|trim),][
    167                                 id_syndic : (#ENV{args}|?{#ENV{args/id_syndic},#ENV{id_syndic}}|trim),][
    168                                 id_forum : (#ENV{args}|?{#ENV{args/id_forum},#ENV{id_forum}}|trim),][
    169                                 id_evenement : (#ENV{args}|?{#ENV{args/id_evenement},#ENV{id_evement}}|trim),][
    170                                 id_gis : (#ENV{args}|?{#ENV{args/id_gis},#ENV{id_gis}}|trim),][
    171                                 recherche : "(#ENV{args}|?{#ENV{args/recherche},#ENV{recherche}})",][
    172                                 mots : (#ENV{mots}|?{[(#ENV{mots}|trim|json_encode)],''}),][
     237                                objets       : "(#ENV{objets,#ENV{class}}|trim)",]
     238                                <BOUCLE_modeles_args_prioritaires(DATA){source table,#LISTE{
     239                                        id_objet, id_rubrique, id_secteur, id_parent,
     240                                        id_article, id_breve, id_document, id_mot,
     241                                        id_groupe, id_auteur, id_syndic, id_forum,
     242                                        id_gis, id_evenement
     243                                }}>[#VALEUR : (#ENV{args}|?{#ENV{args/#VALEUR},#ENV{#VALEUR}}|trim),
     244                                ]</BOUCLE_modeles_args_prioritaires>[
     245                                media        : "(#ENV{args}|?{#ENV{args/media},#ENV{media}}|trim)",][
     246                                recherche    : "(#ENV{args}|?{#ENV{args/recherche},#ENV{recherche}})",][
     247                                mots  : (#ENV{mots}|?{[(#ENV{mots}|trim|json_encode)],''}),][
    173248                                limit : (#ENV{limit,#ENV{limite,500}}|trim)][
    174249                                (#ENV{objets}|=={point_libre}|oui)
     
    183258                                if (data){
    184259                                        // Charger le json (data) et déclarer les points
    185                                         var geojson = new L.geoJson('', {[
    186                                                 style: (#ENV*{path_styles}|json_encode),
    187                                                 ]onEachFeature: function (feature, layer) {
    188                                                         // Déclarer l'icone du points, si défini
    189                                                         if (feature.properties && feature.properties.icon){
    190                                                                 layer.setIcon(new L.Icon({
    191                                                                         iconUrl: feature.properties.icon,
    192                                                                         iconSize: new L.Point( feature.properties.icon_size\[0\], feature.properties.icon_size\[1\] ),
    193                                                                         iconAnchor: new L.Point( feature.properties.icon_anchor\[0\], feature.properties.icon_anchor\[1\] )
    194                                                                 }));
    195                                                         }
    196                                                         // Déclarer le contenu de la popup s'il y en a
    197                                                         if (feature.properties && (feature.properties.title || feature.properties.description)){
    198                                                                 var popupContent = '';
    199                                                                 if (feature.properties.title)
    200                                                                         popupContent = '<strong>' + feature.properties.title + '</strong>';
    201                                                                 if (feature.properties.description)
    202                                                                         popupContent = popupContent + feature.properties.description;
    203                                                                 layer.bindPopup(popupContent);
    204                                                         }
    205                                                 }
    206                                         }).addTo(map[(#GET{id})]);
    207                                         geojson.addData(data);
    208                                         [(#ENV{autocenterandzoom,#ENV{centrer_auto}}|oui)
    209                                         map[(#GET{id})].fitBounds(geojson.getBounds());]
     260                                        parseGeoJson(data, map[(#GET{id})]);
    210261                                }
    211262                        }
     
    253304        $(function(){
    254305                jQuery.getScript(['(#CONFIG{auto_compress_js}|=={oui}|?{[(#PRODUIRE{fond=javascript/gis.js}|compacte)],[(#PRODUIRE{fond=javascript/gis.js})]})'],function(){
    255                         if (typeof(callback_map[(#GET{id})]) === "function") {
    256                                 init_map[(#GET{id})](callback_map[(#GET{id})]);
    257                         } else {
    258                                 init_map[(#GET{id})]();
    259                         }
     306                        [(#ENV{cluster}|=={oui}|oui)
     307                                jQuery.getScript('[(#CHEMIN{javascript/leafclusterer.js}|compacte)]',function(){
     308                        ]
     309                                if (typeof(callback_map[(#GET{id})]) === "function") {
     310                                        init_map[(#GET{id})](callback_map[(#GET{id})]);
     311                                } else {
     312                                        init_map[(#GET{id})]();
     313                                }
     314                        [(#ENV{cluster}|=={oui}|oui)
     315                                });
     316                        ]
    260317                });
    261318        });
  • _plugins_/gis/trunk/paquet.xml

    r69436 r69451  
    22        prefix="gis"
    33        categorie="divers"
    4         version="4.2.0"
     4        version="4.3.0"
    55        schema="2.0.3"
    66        etat="test"
Note: See TracChangeset for help on using the changeset viewer.