獲取傳單上矩形的坐標
[英]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.