javascript Leaflet.Draw矩形的坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15265835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Coordinates of Leaflet.Draw rectangle
提问by mortenstarck
Is it possible to get the coordinates of the rectangle on mouseClick, so I have all the corners of the rectangle?
是否可以在 mouseClick 上获得矩形的坐标，所以我有矩形的所有角？
采纳答案by tbicr
See event object (http://leafletjs.com/reference.html#event-objects):
查看事件对象（http://leafletjs.com/reference.html#event-objects）：
var map = L.map('map').setView([53.902257, 27.561640], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var bounds = [[53.912257, 27.581640], [53.902257, 27.561640]];
var rect = L.rectangle(bounds, {color: 'blue', weight: 1}).on('click', function (e) {
// There event is event object
// there e.type === 'click'
// there e.lanlng === L.LatLng on map
// there e.target.getLatLngs() - your rectangle coordinates
// but e.target !== rect
console.info(e);
}).addTo(map);
Use e.target.getLatLngs().
使用e.target.getLatLngs().
回答by martynas
Leaflet.drawpluginuses standard Leaflet's L.Rectangle.
Leaflet.draw插件使用标准Leaflet 的 L.Rectangle。
Leaflet's rectangle extends Polygon. Polygon extends Polyline.
Leaflet 的矩形扩展了Polygon。Polygon 扩展Polyline。
Therefore, in order to get the coordinates of the Leaflet.draw's rectangle you can use Polyline's method getLatLngs()that returns an array of the points in the path.
因此，为了获得 Leaflet.draw 矩形的坐标，您可以使用 Polyline 的方法getLatLngs()，该方法返回路径中点的数组。
Example:
例子：
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'rectangle') {
layer.on('mouseover', function() {
alert(layer.getLatLngs());
});
}
drawnItems.addLayer(layer);
});
回答by Bashirpour
map.on(L.Draw.Event.CREATED, function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
console.log(layer.getLatLngs())
});
回答by Stefan Steiger
It should be noted that e.layerType contains the shape-type that is being created.
Methods like getLatLngs and getLatLng are specific to the shapetype.
应该注意的是，e.layerType 包含正在创建的形状类型。
getLatLngs 和 getLatLng 等方法特定于 shapetype。
These are the different types allowed in layer according to the typescript definition file
根据打字稿定义文件，这些是层中允许的不同类型
Circle | CircleMarker | Marker | Polygon | Polyline | Rectangle;
And the possible values for e.layerType are (according to the typescript definition file)
e.layerType 的可能值是（根据打字稿定义文件）
circle, marker, polygon, polyline, rectangle
So you can always get the coordinates with e.layer.toGeoJSON().geometry.coordinates.
But you need to switch between the e.layerType-s, because the circle geojson does not contain the radius, you need to get it with getRadius.
Further note, that getLatLngs returns a LatLng-array of an UNclosed polygon, while toGeoJSON().geometry.coordinates returns a closedpolygon with coordinates as LngLat-arrray.
因此，您始终可以使用 e.layer.toGeoJSON().geometry.coordinates 获取坐标。
但是需要在e.layerType-s之间切换，因为圆geojson不包含半径，需要用getRadius获取。
此外，注意，这getLatLngs回报经纬度的的-array联合国封闭的多边形，而toGeoJSON（）。geometry.coordinates回报封闭坐标多边形LngLat-arrray。
// console.log((<any>e.layer).getLatLngs()); // polyline
// console.log((<any>e.layer).getLatLng()); // circle
// mind the s at the end of the function...
map.on('draw:created', function(e:L.DrawEvents.Created)
{
console.log('On draw:created', e.target);
console.log(e.type, e);
console.log(e.layerType);
// console.log((<any>e.layer).getLatLngs()); // polyline
// console.log((<any>e.layer).getLatLng()); // circle
// e.layerType // polygon, circle, etc.
// polygon
// e.layer.getLatLngs()
// circle
// e.layer.getLatLng()
// e.layer.getRadius()
// e.layer.toGeoJSON().geometry.type // is point if circle
// e.layer.toGeoJSON().geometry.coordinates
let type = e.layerType,
layer = e.layer;
drawnItems.addLayer(layer);
});
