Рассчитать границы видимой части карты

Question

У меня есть карта и элемент над ней.Карта находится на весь экран (100% по высоте и ширине).

Как рассчитать границы карты VISIBLE (без покрытия частипо элементу)?

Я прикрепил картинку ниже.Синий элемент находится над картой, и я хочу получить границы внутри красного прямоугольника.

Answer 1

Я бы использовал L.Map.containerPointToLatLng.Позвольте мне процитировать документацию ...

Учитывая координату пикселя относительно контейнера карты, возвращает соответствующую географическую координату (для текущего уровня масштабирования).

Таким образом, вы можете выбрать юго-восток (справа внизу) LatLng, позвонив по номеру map.getBounds.getSouthEast(), а затем на северо-запад LatLng, выполнив что-то вроде ...

// Get the height of the overlapping element
var h = document.getElementById('cover').getBoundingClientRect().height;

// Pixel coordinates of the desired northwest corner, relative to the map
// container
var px = [0, h];

// And convert to LatLng
var neLatLng = map.containerPointToLatLng(px);

Как только вы получитедля углов NE и SW следует создать тривиальный экземпляр LatLngBounds.

.

Answer 2

Границы карты могут дать вам один угол, мы просто должны рассчитать еще один.Давайте перейдем к северо-восточному (вверху справа):

1. и получим исходное пиксельное (вверху слева) вашей карты:

   var pxOrg = map.getPixelOrigin();
   

2. добавьте размеры синего прямоугольника:

    // let's say it's your blue rectangle
    var $cover = document.getElementById('cover');
   
    var deltaX = $cover.offsetLeft + $cover.getBoundingClientRect().width;
    var deltaY = $cover.offsetTop + $cover.getBoundingClientRect().height;
   
    // pixel coordinates of the NE corner
    var pxNE = pxOrg.add(L.point(deltaX, deltaY));
   

3. перенесите в координаты , теперь у вас есть свой северо-восточный угол

    var ne = map.unproject(pxNE);
   

4. получить границы карты, захватить юго-западный угол и построить окончательный результат

   var bounds = L.latLngBounds(map.getBounds().getSouthWest(), ne);
   

И демо

var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


var pxOrg = map.getPixelOrigin();

var $cover = document.getElementById('cover');
var deltaX = $cover.offsetLeft + $cover.getBoundingClientRect().width;
var deltaY = $cover.offsetTop + $cover.getBoundingClientRect().height;
var pxNE = pxOrg.add(L.point(deltaX, deltaY));

var ne = map.unproject(pxNE);

L.marker(ne).addTo(map);

var bounds = L.latLngBounds(map.getBounds().getSouthWest(), ne);
console.log(bounds.toBBoxString());

html, body {
  height: 100%;
  margin: 0;
}
#container {
  width: 90%;
  height: 100%;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
  z-index:1;
}
#cover {
  z-index:2;
  width: 100%; height: 100px; background: rgba(0, 0, 255, 0.2);
  position: absolute; left:0; top:0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    
<div id='container'>
  <div id='map'></div>
  <div id='cover'></div>
</div>