How write text inside polygon leaflet draw

2019-07-17 21:04发布

问题:

    var drawnItems = new L.FeatureGroup();
leafletMap.addLayer(drawnItems);

L.drawLocal.draw.toolbar.buttons.polygon = 'Draw  polygon!';

var drawControl = new L.Control.Draw({
    position: 'topright',
    draw: {
        polyline: {
            metric: true
        },

        polygon: {
            allowIntersection: false,
            showArea: true,
            drawError: {
                color: '#b00b00',
                timeout: 1000
            },

            shapeOptions: {
                color: '#bada55'
            }
        },
        circle: {

            shapeOptions: {
                color: '#662d91'
            }
        },
        circle:false,
        marker: false
    },
    edit: {
        featureGroup: drawnItems,
        remove: true
    }
});

Hello friends, i am using leaflet draw to draw polygon ,but after polygon is draw i want to show text inside that polygon, does that is possible.

thank you

回答1:

I use a bootbox dialog to ask for the text and bindTooltip to leave the text.

map.on(L.Draw.Event.CREATED, function(e) {
    var layer = e.layer;
    bootbox.prompt({title: "Any comment?", closeButton: false, callback: putTooltip});
        function putTooltip(result) {
            layer.bindTooltip(result, {'permanent': true, 'interactive': true});
            }
    });


回答2:

Try using L.Tooltip with permanent set to true.

From the Leaflet.Draw github, this code snippet works with a popup:

map.on(L.Draw.Event.CREATED, function (e) {
    var type = e.layerType,
        layer = e.layer;

    if (type === 'marker') {
        layer.bindPopup('A popup!');
    }

    editableLayers.addLayer(layer);
});

You can modify that code snippet to add a tooltip instead.