Question

我有一张地图，上面有一个元素。地图位于整个屏幕上（高度和宽度均为100％）。

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

我在下面附上一张图片。蓝色元素在地图上，我想在红色矩形内找到边界。

Answer 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>

Answer 2

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

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

因此，您可以通过调用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);：

a.jamClass{width:50px !important;}
.jamClass{wdith:50px !important;}

一旦有了NE和SW角，构造一个LatLngBounds的实例就不那么容易了。

计算地图可见部分的边界

2 个答案: