Changeset 96504 in spip-zone


Ignore:
Timestamp:
Apr 7, 2016, 9:40:38 AM (5 years ago)
Author:
kent1@…
Message:

C'est le moment de tout casser

On utilise les fonctions d'édition complètes de leaflet draw ce qui permet en principe surtout de changer le type d'un GIS (le passer de point à polygone ou autre).

On ajoute le droit de tracer des rectangles

Location:
_plugins_/gis_geometries
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/gis_geometries/paquet.xml

    r96485 r96504  
    22        prefix="gisgeom"
    33        categorie="divers"
    4         version="1.8.1"
     4        version="1.8.2"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.1.*]"
  • _plugins_/gis_geometries/saisies/carte.html

    r96464 r96504  
    4141/*<![CDATA[*/
    4242var form_map,
     43        editableLayers,
    4344        annuler_geocoder = 0;
    4445[(#ENV{recherche}|!={non}|oui|et{#CONFIG{gis/geocoder}|oui})
     
    4950        var marker;
    5051       
    51         var maj_inputs = function(map,data,action) {
     52        var maj_inputs = function(map,layer,data,action) {
    5253                [(#GET{geocoder}|oui)
    5354                if (action != 'geocoding') {
     
    6263                        $('#champ_#ENV{champ_lon,lon}').val(data.lng);
    6364                        annuler_geocoder = 1;
    64                         form_map.panTo(data);
     65                        map.panTo(data);
    6566                        marker.setLatLng(data);
    6667                }
     
    6970                                $('#champ_#ENV{champ_lat,lat}').val(data.lat);
    7071                                $('#champ_#ENV{champ_lon,lon}').val(data.lng);
    71                                 form_map.panTo(data);
     72                                map.panTo(data);
    7273                                marker.setLatLng(data);
    7374                        }else{
    7475                                $('#champ_#ENV{champ_lat,lat}').val(data.point.lat);
    7576                                $('#champ_#ENV{champ_lon,lon}').val(data.point.lng);
    76                                 form_map.panTo(data.point);
     77                                map.panTo(data.point);
    7778                                marker.setLatLng(data.point);
    7879                        }
     
    8182                }
    8283                if (!marker._map)
    83                         form_map.addLayer(marker);
     84                        layer.addLayer(marker);
    8485        }
    8586       
     
    9495                        $('#champ_#ENV{champ_pays,pays}').val(query.country);
    9596                        $('#champ_#ENV{champ_code_pays,code_pays}').val(query.country_code);
    96                         maj_inputs(form_map,query,'geocoding');
     97                        maj_inputs(form_map,editableLayers,query,'geocoding');
    9798                }else{
    9899                        alert('<:gis:erreur_geocoder:> '+query.search);
     
    101102       
    102103        var init_map = function(callback) {
     104                var marker_dragend = function(e){
     105                        if(e.target){
     106                                layer = e.target;
     107                        }
     108                        else{
     109                                layer = e;
     110                        }
     111                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(layer.toGeoJSON()));
     112                        maj_inputs(form_map,editableLayers,layer._latlng,'click');
     113                }
     114                var layer_edit = function(e){
     115                        if(e.target)
     116                                layer = e.target;
     117                        else
     118                                layer = e;
     119                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(layer.toGeoJSON()));
     120                        var center = layer.getBounds().getCenter();
     121                        $('#champ_#ENV{champ_lat,lat}').val(center.lat);
     122                        $('#champ_#ENV{champ_lon,lon}').val(center.lng);
     123                }
     124                var gisdraw_change_controls = function(options){
     125                        form_map.removeControl(drawControl);
     126                        drawControl = new L.Control.Draw(options)
     127                        form_map.addControl(drawControl);
     128                        form_map.drawControl = drawControl;
     129                }
    103130                // creer la carte
    104131                var map_container = 'map_[(#ENV{nom})]';
     
    117144                form_map.attributionControl.setPrefix('');
    118145               
    119                 marker = new L.Marker(new L.LatLng(#ENV{lat,0}, #ENV{lon,0}), {draggable: true});
     146                marker = new L.Marker(new L.LatLng(#ENV{lat,0}, #ENV{lon,0}), {draggable: [(#ENV{nodraw}|?{true,false})]});
    120147               
    121148                //default layer
     
    139166               
    140167                [(#GET{utiliser_bb}|non)
    141                 form_map.setView(new L.LatLng([(#GET{init_lat})], [(#GET{init_lon})]), [(#GET{init_zoom})]); 
    142                 ]
     168                form_map.setView(new L.LatLng([(#GET{init_lat})], [(#GET{init_lon})]), [(#GET{init_zoom})]);]
     169
    143170                [(#GET{utiliser_bb}|oui)
    144171                form_map.fitBounds(
     
    153180                        $('#champ_#ENV{champ_lat,lat}').val(e.latlng.lat);
    154181                        $('#champ_#ENV{champ_lon,lon}').val(e.latlng.lon);
    155                 });             
    156                 ]
    157                
     182                });]
     183
     184                [(#REM)
     185                       
     186                        On ajoute notre point (ou tout autre élément) dans un FeatureGroup
     187                       
     188                ]editableLayers = new L.FeatureGroup();
     189                form_map.addLayer(editableLayers);
     190
    158191                [(#GET{geocoder}|oui)
    159192                geocoder = new L.Geocoder(geocode,{acceptLanguage:'#ENV{lang}'});]
     
    176209                        style: (#ENV*{path_styles}|?{[(#ENV*{path_styles}|json_encode)],[(#GEOMETRY_STYLES|appliquer_filtre{geometry_styles_to_json})]}),
    177210                        ]onEachFeature: function (feature, layer) {
     211                                editableLayers.addLayer(layer);
    178212                                if (feature.geometry.type == 'Polygon' || feature.geometry.type == 'LineString') {
    179213                                        // centrer la carte sur les bounds de l'objet
    180214                                        form_map.fitBounds(layer.getBounds());
    181                                         // temp bugfix see https://github.com/Leaflet/Leaflet.draw/issues/364#issuecomment-74184767
    182                                         layer.options.editing || (layer.options.editing = {});
    183                                         // activer l'édition sur l'objet
    184                                         layer.editing.enable();
    185215                                        // surveiller les changements sur les points de l'objet
    186216                                        layer.on("edit", function(e){
    187                                                 $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
    188                                                 var center = e.target.getBounds().getCenter();
    189                                                 $('#champ_#ENV{champ_lat,lat}').val(center.lat);
    190                                                 $('#champ_#ENV{champ_lon,lon}').val(center.lng);
     217                                                layer_edit(e);
    191218                                        });
    192219                                } else if (feature.geometry.type == 'Point') {
     
    207234                                        // surveiller les changements sur le point
    208235                                        layer.on("dragend", function(e){
    209                                                 $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
    210                                                 maj_inputs(form_map,e.target._latlng,'click');
     236                                                marker_dragend(e);
    211237                                        });
    212238                                }
     
    220246                        style: (#ENV*{path_styles}|json_encode),
    221247                        ]onEachFeature: function (feature, layer) {
     248                                editableLayers.addLayer(layer);
     249                                form_map.removeLayer(layer);
    222250                                if (feature.type == 'Polygon' || feature.type == 'MultiPolygon' || feature.type == 'LineString') {
    223251                                        // centrer la carte sur les bounds de l'objet
    224252                                        form_map.fitBounds(layer.getBounds());
    225                                         // temp bugfix see https://github.com/Leaflet/Leaflet.draw/issues/364#issuecomment-74184767
    226                                         layer.options.editing || (layer.options.editing = {});
    227                                         // activer l'édition sur l'objet
    228                                         layer.editing.enable();
    229253                                        // surveiller les changements sur les points de l'objet
    230254                                        layer.on("edit", function(e){
    231                                                 $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
    232                                                 var center = e.target.getBounds().getCenter();
    233                                                 $('#champ_#ENV{champ_lat,lat}').val(center.lat);
    234                                                 $('#champ_#ENV{champ_lon,lon}').val(center.lng);
     255                                                layer_edit(e);
    235256                                        });
    236257                                } else if (feature.geometry.type == 'Point') {
     
    251272                                        // surveiller les changements sur le point
    252273                                        layer.on("dragend", function(e){
    253                                                 $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
    254                                                 maj_inputs(form_map,e.target._latlng,'click');
     274                                                marker_dragend(e);
    255275                                        });
    256276                                }
     
    258278                }).addTo(form_map);
    259279                geojson.addData([(#ENV**{geojson}|html_entity_decode)]);
     280               
    260281                </BOUCLE_si_geojson>
    261                
    262                 [(#REM) afficher les outils de dessin uniquement lors de la création d'objet ]
    263                 [(#ENV{nodraw}|non)
     282                <//B_gis>
     283                [(#REM)
     284               
     285                        afficher les outils de dessin uniquement lors de la création d'objet
     286                       
     287                ][(#ENV{nodraw}|non)
    264288                // i18n des chaines de Leaflet.draw
    265289                L.drawLocal.draw.toolbar.actions.title = '<:gis:toolbar_actions_title|texte_script:>';
     
    267291                L.drawLocal.draw.toolbar.buttons.polyline = '<:gis:toolbar_buttons_polyline|texte_script:>';
    268292                L.drawLocal.draw.toolbar.buttons.polygon = '<:gis:toolbar_buttons_polygon|texte_script:>';
     293                L.drawLocal.draw.toolbar.buttons.rectangle = '<:gis:toolbar_buttons_rectangle|texte_script:>';
     294                L.drawLocal.draw.toolbar.buttons.circle = '<:gis:toolbar_buttons_circle|texte_script:>';
    269295                L.drawLocal.draw.toolbar.buttons.marker = '<:gis:toolbar_buttons_marker|texte_script:>';
    270296                L.drawLocal.draw.toolbar.undo.title = '<:gis:toolbar_undo_title|texte_script:>';
     
    277303                L.drawLocal.draw.handlers.polyline.tooltip.cont = '<:gis:toolbar_handlers_polyline_tooltip_cont|texte_script:>';
    278304                L.drawLocal.draw.handlers.polyline.tooltip.end = '<:gis:toolbar_handlers_polyline_tooltip_end|texte_script:>';
     305                L.drawLocal.edit.toolbar.actions.save.text = '<:bouton_enregistrer|texte_script:>';
     306                L.drawLocal.edit.toolbar.actions.save.title = '<:gis:bouton_enregistrer_title|texte_script:>';
     307                L.drawLocal.edit.toolbar.actions.cancel.text = '<:bouton_annuler|texte_script:>';
     308                L.drawLocal.edit.toolbar.actions.cancel.title = '<:gis:bouton_annuler_title|texte_script:>';
     309                L.drawLocal.edit.toolbar.buttons.edit = '<:gis:toolbar_edit_buttons_edit|texte_script:>';
     310                L.drawLocal.edit.toolbar.buttons.editDisabled = '<:gis:toolbar_edit_buttons_editdisabled|texte_script:>';
     311                L.drawLocal.edit.toolbar.buttons.remove = '<:gis:toolbar_edit_buttons_remove|texte_script:>';
     312                L.drawLocal.edit.toolbar.buttons.removeDisabled = '<:gis:toolbar_edit_buttons_removedisabled|texte_script:>';
     313                L.drawLocal.edit.handlers.edit.tooltip.text = '<:gis:toolbar_edit_handlers_edit_tooltip_text|texte_script:>';
     314                L.drawLocal.edit.handlers.edit.tooltip.subtext = '<:gis:toolbar_edit_handlers_edit_tooltip_subtext|texte_script:>';
     315                L.drawLocal.edit.handlers.remove.tooltip.text = '<:gis:toolbar_edit_handlers_remove_tooltip_text|texte_script:>';
     316
    279317                var drawOptions = {
    280318                        position: 'topleft',
     
    290328                                marker: [(#ENV{boutons}|table_valeur{marker}|=={non}|?{false,true})],
    291329                                circle: false,
    292                                 rectangle: false
     330                                rectangle: [(#ENV{boutons}|table_valeur{rectangle}|=={non}|oui)false][
     331                                (#ENV{boutons}|table_valeur{rectangle}|=={non}|non){
     332                                        shapeOptions: { color: '#0033ff' }
     333                                }]
    293334                        },
    294                         edit: false
    295                 };
    296                 var drawControl = new L.Control.Draw(drawOptions);
     335                        edit: {
     336                                featureGroup: editableLayers
     337                        }
     338                }, drawOptionsBlocked = {
     339                        position: 'topleft',
     340                        draw: false,
     341                        edit: {
     342                                featureGroup: editableLayers
     343                        }
     344                }, edited = false;
     345               
     346                [(#REM)
     347               
     348                        Si on a un objet, on limite l'usage de la toolbar,
     349                        sinon on a accès aux outils de dessin
     350                ]
     351                if(Object.keys(editableLayers._layers).length >= 1){
     352                        var drawControl = new L.Control.Draw(drawOptionsBlocked);
     353                }
     354                else{
     355                        var drawControl = new L.Control.Draw(drawOptions);
     356                }
    297357                form_map.addControl(drawControl);
    298358                form_map.drawControl = drawControl;
     
    300360                        var type = e.layerType,
    301361                                layer = e.layer;
    302                         drawControl.removeFrom(form_map);
    303362                        if (type === 'marker') {
    304363                                marker.setLatLng(layer._latlng);
     364                                form_map.removeLayer(marker);
     365                                editableLayers.addLayer(marker);
    305366                                $('#champ_#ENV{champ_type,type}').val('Point');
    306                                 $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(layer.toGeoJSON()));
    307                                 maj_inputs(form_map,layer._latlng,'click');
     367                                marker_dragend(layer);
     368                                marker.on("dragend", function(e){
     369                                        marker_dragend(e);
     370                                });
    308371                        } else {
    309                                 layer.addTo(form_map);
    310                                 if (type === 'polygon')
     372                                editableLayers.addLayer(layer);
     373                                if (type === 'polygon' || type === 'rectangle'){
    311374                                        $('#champ_#ENV{champ_type,type}').val('Polygon');
    312                                 else if (type === 'polyline')
     375                                }else if (type === 'polyline'){
    313376                                        $('#champ_#ENV{champ_type,type}').val('LineString');
    314                                 $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(layer.toGeoJSON()));
    315                                 var center = layer.getBounds().getCenter();
    316                                 $('#champ_#ENV{champ_lat,lat}').val(center.lat);
    317                                 $('#champ_#ENV{champ_lon,lon}').val(center.lng);
    318                                 // temp bugfix see https://github.com/Leaflet/Leaflet.draw/issues/364#issuecomment-74184767
    319                                 layer.options.editing || (layer.options.editing = {});
    320                                 layer.editing.enable();
     377                                }
     378                                layer_edit(layer);
    321379                                layer.on("edit", function(e){
    322                                         $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
    323                                         var center = e.target.getBounds().getCenter();
    324                                         $('#champ_#ENV{champ_lat,lat}').val(center.lat);
    325                                         $('#champ_#ENV{champ_lon,lon}').val(center.lng);
     380                                        layer_edit(e);
    326381                                });
     382                        }
     383                        gisdraw_change_controls(drawOptionsBlocked);
     384                });
     385                form_map.on('draw:deleted', function(e) {
     386                        if(Object.keys(e.layers._layers).length >= 1){
     387                                $('#champ_[(#ENV{champ_lat,lat})],#champ_[(#ENV{champ_lon,lon})],#champ_[(#ENV{champ_type,type})],#champ_[(#ENV{champ_geojson,geojson})]').val('');
     388                                gisdraw_change_controls(drawOptions);
     389                        }
     390                });
     391                /**
     392                 * Au editstart, on met la variable edited à false
     393                 */
     394                form_map.on('draw:editstart', function(e) {
     395                        edited = false;
     396                });
     397                /**
     398                 * Au edited, on met la variable edited à true (il y a eu edition)
     399                 */
     400                form_map.on('draw:edited', function(e) {
     401                        edited = true;
     402                });
     403                /**
     404                 * Au editstop, on vérifie la variable edited, si true, il y a eu modif, donc on ne fait rien
     405                 * si false, on remet les valeurs par défaut avant édition (bouton annuler)
     406                 */
     407                form_map.on('draw:editstop', function(e) {
     408                        if(!edited){
     409                                var type = $('#champ_#ENV{champ_type,type}').val();
     410                                editableLayers.eachLayer(function (layer) {
     411                                        if (type === 'Point') {
     412                                                marker_dragend(layer);
     413                                        } else {
     414                                                layer_edit(layer);
     415                                        }
     416                                });
     417                        }else{
     418                                edited = false;
    327419                        }
    328420                });]
     
    332424                // mettre a jour les coordonnees quand on clique la carte
    333425                form_map.on('click', function(e) {
    334                         maj_inputs(form_map,e.latlng,'click');
    335                         $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(marker.toGeoJSON()));
     426                        marker_dragend(marker);
    336427                });
    337428                // mettre à jour le champ geosjon et le marker quand on change les valeur de lat ou lon
     
    344435                        $('#champ_#ENV{champ_geojson,geojson}').val('{"type":"Point","coordinates":\['+ new_lon +','+ new_lat +'\]}');
    345436                });]
     437               
     438                [(#ENV{nodraw}|oui)
    346439                // mettre à jour les coordonnées quand on déplace le marker
    347440                marker.on('dragend', function(e){
    348                         maj_inputs(form_map,e.target._latlng,'click');
    349                         $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(marker.toGeoJSON()));
    350                 });
    351                 <//B_gis>
     441                        marker_dragend(e);
     442                });]
    352443               
    353444                // mettre à jour le zoom quand on le modifie
Note: See TracChangeset for help on using the changeset viewer.