我正在使用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 © <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);
答案 0 :(得分:2)
您已经成功绘制了形状,但是这里缺少的是您还没有在地图图层顶部显示绘制的形状,尽管您正在尝试实现是显示它。
您必须做的只是在地图上添加绘制的图层。
<强> E.g。 强>
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
答案 1 :(得分:1)
您需要侦听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);
});