传单绘制在绘制后丢失形状答案

【问题标题】：Leaflet draw loses shapes after drawing传单绘制在绘制后丢失形状
【发布时间】：2016-06-15 10:16:01
【问题描述】：

我使用leaflet 显示地图，使用leaflet-draw plugin 在地图上绘制形状。

我有下面的代码 (see plunker)，它允许绘制形状。但是一旦形状完成，它就会消失。

在绘制后使形状在地图上可见时缺少什么？

    var mymap = L.map('mapid').setView([47.2090048, 7.7746663], 15);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZXJuc3RwIiwiYSI6ImNpcGdtMTUzOTAwMGV2Ymt3Z2JlYnMyejgifQ.gHxSIfBUM0-UiuWurWoEvQ', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
      id: 'mapbox.streets'
    }).addTo(mymap);

    var marker = L.marker([47.2090048, 7.7747663]).addTo(mymap);

    // Initialise the FeatureGroup to store editable layers
    var drawnItems = new L.FeatureGroup();
    mymap.addLayer(drawnItems);

    // Initialise the draw control and pass it the FeatureGroup of editable layers
    var drawControl = new L.Control.Draw({
      edit: {
        featureGroup: drawnItems
      }
    });
    mymap.addControl(drawControl);

【问题讨论】：

标签： leaflet leaflet.draw

【解决方案1】：

您已经成功绘制了形状，但这里缺少的是您没有在地图图层顶部显示绘制的形状，尽管您试图实现的是显示它。

您所要做的只是将绘制的图层添加到地图顶部。

例如

mymap.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    if (type === 'marker') {
        // Do marker specific actions
    }

    // Do whatever else you need to. (save to db, add to map etc)
    mymap.addLayer(layer);
});

您可以将此代码添加到js 的末尾。这取自docs

【讨论】：

【解决方案2】：

您需要在事件监听器中监听draw:created event并将图层添加到L.FeatureGroup：

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    if (type === 'marker') {
        // Do marker specific actions
    }

    // Do whatever else you need to. (save to db, add to map etc)
    drawnItems.addLayer(layer);
});

【讨论】：