使用 leaflet.draw 编辑 CartoDB 数据答案

【问题标题】：Edit CartoDB Data with leaflet.draw使用 leaflet.draw 编辑 CartoDB 数据
【发布时间】：2015-03-17 17:09:04
【问题描述】：

我是 leaflet.js 和 CartoDB 的新手。我已经能够显示 Leaflet.draw 编辑工具栏，但无法设置配置选项。这个JSFiddle 显示了设置选项以及定义可编辑层的尝试，请参见下面的代码：

var options = {
    position: 'topright',
    draw: {
        polyline: false,
        polygon: false,
        circle: false, 
        rectangle: false,
        marker: {
            icon: new MyCustomMarker()
        }
    },
    edit: {
        featureGroup: layerUrl, //REQUIRED!!
        remove: false
    }
};

我想知道我是否将此代码放在正确的函数中？

【问题讨论】：

标签： javascript dictionary leaflet cartodb

【解决方案1】：

您正在创建一个选项对象并且没有在任何地方使用它。如果要为 Leaflet Draw 使用自定义选项，则需要单独实例化控件，以便将选项对象添加到其中。接下来，您将引用editableLayers 作为保存绘制对象的层，但您没有在任何地方创建实际层。请按以下步骤操作：

首先从您的地图选项中取出drawnControl: true：

map = new L.Map('cartodb-map', { 
    center: [40,-98],
    zoom: 4,
})

创建一个实际图层以在您的绘图选项中使用并将其添加到地图中：

var editableLayers = new L.FeatureGroup();

现在因为editableLayers 上面的行包含对实际层的引用，并且不会在您的控制台中抛出Uncaught ReferenceError: editableLayers is not defined：

var options = {
    position: 'topright',
    draw: {
        polyline: false,
        polygon: false,
        circle: false, 
        rectangle: false,
        marker: {
            icon: new MyCustomMarker()
        }
    },
    edit: {
        featureGroup: editableLayers, //REQUIRED!!
        remove: false
    }
};

现在使用您的选项单独创建绘图控件并将其添加到地图中：

var drawControl = new L.Control.Draw(options).addTo(map);

这是你的 Fiddle 的一个工作分支：http://jsfiddle.net/ryntc3vv/

说了这么多，我真的很想知道你在哪里想出了你做过/试图做的事情。这没有任何意义，所以如果你在某个地方学习某种教程，我会说把它扔掉，并坚持在 Leaflet Draw 存储库中随 Leaflet draw 提供的文档：https://github.com/Leaflet/Leaflet.draw#adding-the-edit-toolbar我所有的东西在这里完成，在您之前的问题中已完全涵盖。

【讨论】：