在鼠标单击时获取矩形的坐标,以便我可以获得矩形的所有角落。
请参见事件对象 (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);
e.target.getLatLngs()
。Leaflet.draw
插件使用标准的Leaflet的L.Rectangle。getLatLngs()
方法,该方法返回路径中点的数组。
示例: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);
});
map.on(L.Draw.Event.CREATED, function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
console.log(layer.getLatLngs())
});
需要注意的是,e.layerType包含正在创建的形状类型。
像getLatLngs和getLatLng这样的方法是特定于形状类型的。
根据typescript定义文件,以下是允许在图层中使用的不同类型:
Circle | CircleMarker | Marker | Polygon | Polyline | Rectangle;
而 e.layerType 的可能值是(根据 TypeScript 定义文件)
circle, marker, polygon, polyline, rectangle
因此您可以始终使用e.layer.toGeoJSON().geometry.coordinates获取坐标。
但是,您需要在e.layerType-s之间切换,因为圆形geojson不包含半径,您需要使用getRadius来获取它。
进一步注意,getLatLngs返回一个未封闭的多边形LatLng数组,而toGeoJSON().geometry.coordinates返回一个带有坐标的LngLat数组的封闭多边形。
// 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);
});
{ne:{lat: -23.5601806640625lon: -46.64794921875}, sw:{lat: -23.565673828125,lon: -46.658935546875}}
。 - Peter KraussmapBounds.extend()
时,这是一个不错的小片段。只需为每个新的边界框绘制一个不同的框,并查看其适合地图的程度即可。谢谢,+1。 - Mawg says reinstate Monica