javascript - 如何按坐标过滤 GeoJSON/TopoJSON 数据？

Question

我有包含 GeoJSON/TopoJSON 数据的大文件(每个大约 100mb)。

这些有州和县的边界。州图层加载得很好，因为它没有太多数据，但带有县的图层只会导致 Chrome 中的页面崩溃。

因此，文件本身从网络加载并被正确解析，但当将它们放在 Leaflet map 上时，它会卡住并崩溃。

作为解决方案，我想知道是否可以通过坐标过滤要素？我可以获得 map 的视口(viewport)边界。

是否有方法可以过滤坐标位于某些边界内的要素？

这样我就可以只过滤那些应该在当前 View 中渲染的内容并忽略其余部分，然后在 map /缩放上重复此例程。

Answer 1

首先，Leaflet 有一个 getBounds() 方法，您可以使用该方法仅加载边界框内的功能。这可以通过使用 moveend 事件在 map “移动”(缩放、拖动)时触发 getBounds() 方法来完成。

所以，基本上:

map.on('moveend', function() {
map.getBounds()
//erase the features you had on the map
//Then load on the map only the features with coordinates inside the Bounging Box. 
}

当然，以上只是一种做法。每次 map “移动”时，之前的特征都会被删除并加载新的特征。这可能会导致功能加载缓慢，但对于如此大的文件，您可能不得不忍受它。

此外，您还可以通过加载新功能然后删除旧功能等方式来试验代码。此外，您可以加载比边界框更大的框的特征。