Leaflet顶点单击事件

时间:2018-02-19 18:23:52

标签: javascript html maps leaflet leaflet.draw

如何从L.Polygon顶点触发/收听点击事件?

用户使用以下方式制作多边形

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;
    },

并且在创建多边形时,可以编辑其顶点:

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);
        });
    }

因此,已经绘制了多边形,我想要听取它们顶点的点击次数

  

宣传单1.3.1

     

插件Leaflet.Draw

     

请注意,我没有使用控制工具栏

1 个答案:

答案 0 :(得分:0)

在找到它之后,我发现了一个轻量级的库来控制传单中几何图形的编辑:

首先,将可编辑属性添加到地图

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

然后,启用功能编辑

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);
    });
}

最后听取多边形的顶点点击

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

在这里找到图书馆:

  

如果有人有其他办法,请分享,谢谢!