计算地图可见部分的边界答案

【问题标题】：Calculate the bounds of the visible part of the map计算地图可见部分的边界
【发布时间】：2019-02-08 08:22:12
【问题描述】：

我有一张地图和一个放置在上面的元素。地图在整个屏幕上（高度和宽度均为 100%）。

如何计算VISIBLE地图的边界（没有被元素覆盖的部分）？

我在下面附上了一张图片。蓝色元素在地图上方，我想获得红色矩形内的边界。

【问题讨论】：

如果要计算红色矩形的大小，可以用document.element.clientHeight得到地图的高度，减去蓝色元素的高度。

标签： javascript leaflet

【解决方案1】：

地图边界可以给你一个角，我们只需要计算另一个角。让我们追上东北一号（右上）：

在您的地图上点击pixel origin（左上角）：
```
var pxOrg = map.getPixelOrigin();
```

添加蓝色矩形的尺寸：

 // 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));

reproject to coordinates，你现在有你的东北角
```
 var ne = map.unproject(pxNE);
```

获取地图边界，抓取西南角，构建最终结果

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>

【讨论】：

【解决方案2】：

我会使用L.Map.containerPointToLatLng。让我引用the documentation...

给定一个相对于地图容器的像素坐标，返回对应的地理坐标（当前缩放级别）。

所以你可以通过调用map.getBounds.getSouthEast() 来获取东南（右下）LatLng，然后通过执行类似的操作来获取西北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 的实例应该很简单。

【讨论】：