获取传单上矩形的坐标
[英]Get the coordinates of a rectangle on Leaflet
问题描述
我想获取用户将在地图（传单）上绘制的矩形每个角的坐标。
目标是提取最大/最小纬度和最大/最小经度。
这是我显示地图并使用 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>
我得到了四个角度的坐标（ .getLatLngs() ），但我无法对这个系列进行排序。
例如，这里的结果是： LatLng(45.644768, -0.175781),LatLng(47.428087, -0.175781),LatLng(47.428087, 5.844727),LatLng(465.6457.7)
我想将每个纬度/经度存储在我将在我的网页中显示的变量中：
纬度：47.428087
纬度：45.644768
孤独：5.844727
长度：-0.175781
你对我有什么建议吗？ 还是信息？
提前致谢 ！
2 个解决方案
解决方案1
1 已采纳 2020-10-26 21:10:26
您可以使用此功能：
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];
}
将 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
使用 getCenter() 而不是 getLatLng()
编辑：我看到你需要矩形的每个角的问题，getCenter 没有解决这个问题
此外，我建议使用传单geoman 进行编辑，而不是绘制传单。 （但那只是我的个人意见 ：） ）
Leaflet.Draw矩形的坐标
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.