使用leaflet.draw编辑CartoDB数据

Question

我是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
    }
};

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

Answer 1

您正在创建一个options对象，并且没有在任何地方使用它。如果您想使用自定义选项来绘制Leaflet，则需要单独实例化该控件，以便您可以向其添加options对象。接下来，您将引用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);

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

话虽如此，我真的很想知道你是从哪里想出你所做/想要做的事情的。这没有任何意义，所以如果你正在遵循某种教程，我建议你把它扔掉，坚持使用Leaflet draw存储库的Leaflet Draw提供的文档：https://github.com/Leaflet/Leaflet.draw#adding-the-edit-toolbar我在这里和你之前的问题中所做的所有事情都被完美地覆盖了。