我需要使用leaflet.js将地图添加到我的网站。该站点具有一个管理视图,管理员可以在其中添加标记,并向每个标记添加描述和图像。
我使用了leaflet.draw插件,并在创建事件上尝试更新event.layer.toGeoJSON()
用来添加一些属性(例如图像和文本)的GeoJSON对象,但是没有运气。
谁可以帮我这个事?
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
map = new L.Map('map', {
layers: [osm],
center: new L.LatLng(31.9500, 35.9333),
zoom: 15
}),
drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
}));
map.on('draw:created', function(event) {
var layer = event.layer;
var json = event.layer.toGeoJSON();
json.properties.desc = null;
json.properties.image = null;
drawnItems.addLayer(L.GeoJSON.geometryToLayer(json));
addPopup(layer);
});
function addPopup(layer) {
var content = '';
layer.bindPopup(content).openPopup();
alert('out');
}
function saveData(layer) {
var markerDesc = $('#markerDesc').val();
var json = layer.toGeoJSON();
json.feature.properties.desc = markerDesc;
}
ghybs.. 5
您的"draw:created"
监听器中无需将其转换为GeoJSON,然后再返回到图层。
顺便说一句,您然后向其中添加了一个弹出窗口,layer
而您不对其进行任何操作,因为您已将其转换为GeoJSON数据,并根据该数据创建了一个新层。
只需创建以下结构,以便稍后将存储的数据转换为GeoJSON(如果您需要此功能):layer.feature.type = "Feature"
和layer.feature.properties
。
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
map = L.map('map', {
layers: [osm],
center: [31.9500, 35.9333],
zoom: 15
});
var drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
}));
map.on('draw:created', function (event) {
var layer = event.layer,
feature = layer.feature = layer.feature || {};
feature.type = feature.type || "Feature";
var props = feature.properties = feature.properties || {};
props.desc = null;
props.image = null;
drawnItems.addLayer(layer);
addPopup(layer);
});
function addPopup(layer) {
var content = document.createElement("textarea");
content.addEventListener("keyup", function () {
layer.feature.properties.desc = content.value;
});
layer.on("popupopen", function () {
content.value = layer.feature.properties.desc;
content.focus();
});
layer.bindPopup(content).openPopup();
}
演示:https : //jsfiddle.net/ve2huzxw/314/
编辑:先前的代码实际上没有很好地实现GeoJSON properties
功能(由于丢失,因此保存在上,geometry
而不是保存,而不是feature
,在将FeatureGroup转换为GeoJson时layer.feature.type = "Feature"
,Leaflet Draw不采用属性)
您的"draw:created"
监听器中无需将其转换为GeoJSON,然后再返回到图层。
顺便说一句,您然后向其中添加了一个弹出窗口,layer
而您不对其进行任何操作,因为您已将其转换为GeoJSON数据,并根据该数据创建了一个新层。
只需创建以下结构,以便稍后将存储的数据转换为GeoJSON(如果您需要此功能):layer.feature.type = "Feature"
和layer.feature.properties
。
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
map = L.map('map', {
layers: [osm],
center: [31.9500, 35.9333],
zoom: 15
});
var drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
}));
map.on('draw:created', function (event) {
var layer = event.layer,
feature = layer.feature = layer.feature || {};
feature.type = feature.type || "Feature";
var props = feature.properties = feature.properties || {};
props.desc = null;
props.image = null;
drawnItems.addLayer(layer);
addPopup(layer);
});
function addPopup(layer) {
var content = document.createElement("textarea");
content.addEventListener("keyup", function () {
layer.feature.properties.desc = content.value;
});
layer.on("popupopen", function () {
content.value = layer.feature.properties.desc;
content.focus();
});
layer.bindPopup(content).openPopup();
}
演示:https : //jsfiddle.net/ve2huzxw/314/
编辑:先前的代码实际上没有很好地实现GeoJSON properties
功能(由于丢失,因此保存在上,geometry
而不是保存,而不是feature
,在将FeatureGroup转换为GeoJson时layer.feature.type = "Feature"
,Leaflet Draw不采用属性)