Question

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

我想通过只查询当前地图视口中的对象来更智能地解决这个问题。为此，我修改了我的REST服务以接收多边形并使用它来过滤查询集（我正在使用Django REST）。这已经有效了，我无法弄清楚如何获取当前视口的范围。

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

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

Answer 1

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

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

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

通常，您会收听"moveend"事件并执行查询。

当地图中心停止变化时触发（例如用户停止拖动地图）。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

mapbox.js中的包围框

1 个答案: