leaflet.draw 地图上的可编辑 geoJSON 层
Editable geoJSON layer on map with leaflet.draw
我尝试在 Mapbox 中加载 geoJson 数据并使用插件对其进行编辑 Leaflet.Draw
当我点击编辑按钮时,出现错误:
无法设置未定义的 属性 'original'
图层在地图上,但我无法对其进行编辑。
代码如下:
var map = L.map('map').setView( [40, 40], 2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
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>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: '*******'
}).addTo(map);
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
L.geoJson(<%=RGeo::GeoJSON.encode(@field.shape).to_json.html_safe%>,
{
onEachFeature: function (feature, layer) {
drawnItems.addLayer(layer);
}
}).addTo(map);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
draw : {
position : 'topleft',
polygon : true,
polyline : false,
rectangle : false,
circle : false,
marker: false
},
edit: {
featureGroup: drawnItems
},
}).addTo(map);
所以,我找到了答案。
我正在尝试编辑多边形,但 leaflet.draw 不支持它们。
我切换到leaflet.editable
我尝试在 Mapbox 中加载 geoJson 数据并使用插件对其进行编辑 Leaflet.Draw 当我点击编辑按钮时,出现错误: 无法设置未定义的 属性 'original'
图层在地图上,但我无法对其进行编辑。
代码如下:
var map = L.map('map').setView( [40, 40], 2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
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>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: '*******'
}).addTo(map);
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
L.geoJson(<%=RGeo::GeoJSON.encode(@field.shape).to_json.html_safe%>,
{
onEachFeature: function (feature, layer) {
drawnItems.addLayer(layer);
}
}).addTo(map);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
draw : {
position : 'topleft',
polygon : true,
polyline : false,
rectangle : false,
circle : false,
marker: false
},
edit: {
featureGroup: drawnItems
},
}).addTo(map);
所以,我找到了答案。 我正在尝试编辑多边形,但 leaflet.draw 不支持它们。
我切换到leaflet.editable