简体   繁体   中英

Leaflet vertex click event

How to fire/listen a click event from a L.Polygon vertex ?

The user make a Polygon using:

fobDrawPolygon: function(iobMap) {
        var obPolygon = new L.Draw.Polygon(iobMap, {
            allowIntersection: false,
            showArea: true,
            shapeOptions: {
                color: '#000'
            }
            //repeatMode: true
        });
        obPolygon.options.touchIcon.options.iconSize = [12, 12];
        obPolygon.enable();
        return obPolygon;
    },

and when the polygon is created it is enabled to edit its vertex:

onDrawFeature: function(iobMap, iobFeatureGroup) {
        var me = this;              
        iobMap.on(L.Draw.Event.CREATED, function(event) {
            var obLayer = event.layer;
            obLayer.options.editing = {};
            obLayer.editing.enable();
            iobFeatureGroup.addLayer(obLayer);
        });
    }

So, the polygon is already drawn and I want to listen the clicks of their vertex

Leaflet 1.3.1

Plugin Leaflet.Draw

Notice I don't use control toolbars

After looking for it I found a lightweight library to control editing of geometries in leaflet:

First, add the editable property to the map

var map = L.map('map', {
 editable: true,
 editOptions: {…} //not required
});

then, to enable feature edition

onDrawFeature: function(iobMap, iobFeatureGroup) {
    var me = this;
    iobMap.on(L.Draw.Event.CREATED, function(event) {
        var obLayer = event.layer;
        iobLayer.enableEdit(iobMap); //enable edition            
        me.cacheLayer = iobLayer;
        iobFeatureGroup.addLayer(obLayer);
    });
}

And finally listen the vertex clicks of the polygon

me.cacheLayer.on({
    "editable:vertex:click": function(e){console.log("You touch me", e)}
});

Find the library in here:

If someone has another way of doing it, please share it, thank you!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM