地图框中的边界框.js

Question

我有一个空间数据库，其中包含分布在一个国家/地区的数千个多边形。我想在地图框或传单地图中显示这些面。但是，检索数据库中所有对象的简单查询对网络来说是一个巨大的负载，并且需要很长时间，当它最终加载时，它占用了大部分 RAM 来保存 geojson 对象。

我想通过仅查询当前地图视口中的对象来更智能地解决此问题。为此，我修改了我的 REST 服务以接收一个多边形并使用它来过滤查询集(我使用的是 Django REST)。这已经起作用了，我不知道如何获取当前视口的范围。

mapbox.js是否公开此功能？我该如何解决这个问题？

顺便说一下，我正在使用mapbox.js而不是mapboxgl，只是因为我使用的是众所周知的文本格式，因此支持杂食动物。我处于早期开发阶段，所以如果用另一个库更容易解决这个问题，我愿意考虑它。

Answer 1

您可能已经注意到，mapbox.js扩展了传单。

因此，您应该能够使用map.getBounds()方法来检索当前视区的范围。

返回当前地图视图中可见的地理边界

通常，您将侦听"moveend"事件并执行查询。

当地图中心停止更改时触发(例如，用户停止拖动地图)。

例：

var map = L.map('map').setView([48.86, 2.35], 11);
map.on('moveend', function() {
console.log(map.getBounds().toBBoxString());
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 200px"></div>