给定以下关于 Plunker 的 Leaflet.Draw 示例,我将如何捕获矩形创建的事件和对它的操作?
Given the following Leaflet.Draw example on Plunker, how would I catch the rectangle created event and action on it?
Plunker 示例:
Leaflet Draw plugin with OSM map
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib });
var map = new L.Map('leaflet', { layers: [osm], center: new L.LatLng(52.105289405897, 5.2629891004852425), zoom: 13 });
console.log('map ready');
var drawnItems = new L.FeatureGroup();
var coords = [new L.latLng(51.2, 4.5), new L.latLng(51.2, 4.6), new L.latLng(51.2, 4.9)];
var poly = new L.Polyline(coords, {
color: 'blue',
opacity: 1,
weight: 5
});
drawnItems.addLayer(poly);
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'right',
polygon: {
title: 'Polygon',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
polyline: {
metric: false
},
circle: {
shapeOptions: {
color: '#662d91'
}
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
console.log('adding layer', layer, drawnItems);
});
我需要捕获一个创建的矩形并最终用它的坐标创建一个文件,但现在我正在尝试弄清楚如何捕获事件并将矩形坐标输出到控制台。
原谅我,还在踏入Javascript。谢谢
--编辑--
所以我看到了如何将此事件记录到控制台,但我不清楚如何从事件中访问 lat/lng 信息。
map.on('draw:rectangle-created', function (e) {
console.log(e.rectangle-created);
});
只需使用 draw:created
事件并检查类型是否为矩形:
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'rectangle') {
// It's a rectangle, do stuff
console.log(layer.getLatLngs());
}
drawnItems.addLayer(layer);
console.log('adding layer', layer, drawnItems);
});
您可以通过调用 getLatLngs
方法来访问矩形的坐标。它 returns 一个包含 L.LatLng
个对象的数组:
rectangle.getLatLngs().forEach(function (latlng) {
console.log(latlng.lat); //latitude
console.log(latlng.lng); //longitude
});
Plunker 示例: Leaflet Draw plugin with OSM map
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib });
var map = new L.Map('leaflet', { layers: [osm], center: new L.LatLng(52.105289405897, 5.2629891004852425), zoom: 13 });
console.log('map ready');
var drawnItems = new L.FeatureGroup();
var coords = [new L.latLng(51.2, 4.5), new L.latLng(51.2, 4.6), new L.latLng(51.2, 4.9)];
var poly = new L.Polyline(coords, {
color: 'blue',
opacity: 1,
weight: 5
});
drawnItems.addLayer(poly);
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'right',
polygon: {
title: 'Polygon',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
polyline: {
metric: false
},
circle: {
shapeOptions: {
color: '#662d91'
}
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
console.log('adding layer', layer, drawnItems);
});
我需要捕获一个创建的矩形并最终用它的坐标创建一个文件,但现在我正在尝试弄清楚如何捕获事件并将矩形坐标输出到控制台。
原谅我,还在踏入Javascript。谢谢
--编辑-- 所以我看到了如何将此事件记录到控制台,但我不清楚如何从事件中访问 lat/lng 信息。
map.on('draw:rectangle-created', function (e) {
console.log(e.rectangle-created);
});
只需使用 draw:created
事件并检查类型是否为矩形:
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'rectangle') {
// It's a rectangle, do stuff
console.log(layer.getLatLngs());
}
drawnItems.addLayer(layer);
console.log('adding layer', layer, drawnItems);
});
您可以通过调用 getLatLngs
方法来访问矩形的坐标。它 returns 一个包含 L.LatLng
个对象的数组:
rectangle.getLatLngs().forEach(function (latlng) {
console.log(latlng.lat); //latitude
console.log(latlng.lng); //longitude
});