获取传单上矩形的坐标
[英]Get the coordinates of a rectangle on Leaflet
问题描述
I will want to get the coordinates of each corner of a rectangle that the user will draw on a map (leaflet).
我想获取用户将在地图（传单）上绘制的矩形每个角的坐标。
The goal is to extract the max/min latitude and the max/min longitude.目标是提取最大/最小纬度和最大/最小经度。
Here is the code under which I display my map and I draw my rectangle with Leaflet-Draw :这是我显示地图并使用 Leaflet-Draw 绘制矩形的代码：
// center of the map var center = [46.5, 3]; // Create the map var map = L.map('map').setView(center, 6); // Set up the OSM layer L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>', maxZoom: 18 }).addTo(map); // add a marker in the given location //L.marker(center).addTo(map); // Initialise the FeatureGroup to store editable layers var editableLayers = new L.FeatureGroup(); map.addLayer(editableLayers); var drawPluginOptions = { position: 'topleft', draw: { // disable toolbar item by setting it to false polygon:false, polyline: false, circle: false, // Turns off this drawing tool rectangle: true, marker: false, }, edit: { featureGroup: editableLayers, //REQUIRED!! remove: true } }; // Initialise the draw control and pass it the FeatureGroup of editable layers var drawControl = new L.Control.Draw(drawPluginOptions); map.addControl(drawControl); var editableLayers = new L.FeatureGroup(); map.addLayer(editableLayers); map.on('draw:created', function(e) { var type = e.layerType, layer = e.layer; if (type === 'rectangle') { layer.on('mouseover', function() { var tmp = document.getElementById('ID'); tmp.textContent = layer.getLatLngs(); var sud = document.getElementById('SUD'); sud.textContent = tmp.substring(7, 9); var est = document.getElementById('EST'); est.textContent = tmp.substring(18, 9); }); } editableLayers.addLayer(layer); });
html, body { height: 100% }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet-src.js"></script> <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script> </head> <body> <div id="map" style="width:100%; height:300px"></div> <span id="ID"></span> <span id="SUD"></span> <span id="EST"></span> </body> </html>
I get the coordinates of the four angles ( .getLatLngs() ), but I cannot sequence this series.我得到了四个角度的坐标（ .getLatLngs() ），但我无法对这个系列进行排序。
For example here is the result : LatLng(45.644768, -0.175781),LatLng(47.428087, -0.175781),LatLng(47.428087, 5.844727),LatLng(45.644768, 5.844727)例如，这里的结果是： LatLng(45.644768, -0.175781),LatLng(47.428087, -0.175781),LatLng(47.428087, 5.844727),LatLng(465.6457.7)
I would like to store each latitude / longitude in a variable that I will display in my web page :我想将每个纬度/经度存储在我将在我的网页中显示的变量中：
latN : 47.428087纬度：47.428087
latS : 45.644768纬度：45.644768
lonE : 5.844727孤独：5.844727
lonW : -0.175781长度：-0.175781
Do you have any advice for me?你对我有什么建议吗？ Or information?还是信息？
Thanks in advance !提前致谢 ！
2 个解决方案
解决方案1
1 已采纳 2020-10-26 21:10:26
You can use this function:您可以使用此功能：
function getCorners(layer) {
const corners = layer.getBounds();
const northwest = corners.getNorthWest();
const northeast = corners.getNorthEast();
const southeast = corners.getSouthEast();
const southwest = corners.getSouthWest();
return [northwest, northeast, southeast, southwest];
}
Add the Func to the script将 Func 添加到脚本中
map.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
if (type === 'rectangle') {
layer.on('mouseover', function() {
var tmp = document.getElementById('ID');
var c= getCorners(layer);
tmp.textContent = "NW:"+c[0].toString()+" NE:"+c[1].toString()+" SE:"+c[2].toString()+" SW:"+c[3].toString();
var sud = document.getElementById('SUD');
sud.textContent = tmp.substring(7, 9);
var est = document.getElementById('EST');
est.textContent = tmp.substring(18, 9);
});
}
function getCorners(layer) {
const corners = layer.getBounds();
const northwest = corners.getNorthWest();
const northeast = corners.getNorthEast();
const southeast = corners.getSouthEast();
const southwest = corners.getSouthWest();
return [northwest, northeast, southeast, southwest];
}
解决方案2
0 2020-10-26 20:54:55
Use getCenter() instead of getLatLng()使用 getCenter() 而不是 getLatLng()
EDIT: I see the issue you need each corner of the rectangle, getCenter does not solve that编辑：我看到你需要矩形的每个角的问题，getCenter 没有解决这个问题
Also I recommend leaflet-geoman for editing instead of leaflet draw.此外，我建议使用传单geoman 进行编辑，而不是绘制传单。 (But thats just my opinion :) ) （但那只是我的个人意见 ：） ）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.