Leaflet.js 和复杂多边形

Leaflet.js and complex polygons

对于一个小项目,我允许用户向数据库中添加区域。他们的查询发送到 http://nominatim.openstreetmap.org,我存储纬度和经度。如果可用,我还存储了 geoJSON 多边形轮廓数据。

示例输出:http://nominatim.openstreetmap.org/search?q=wyoming&format=xml&polygon_geojson=1&addressdetails=1

此轮廓区域随后会使用 leaflet.js 显示在地图上。对于很多多边形来说,这很好,但似乎库可以处理的数据量是有限的。一些相当复杂的区域(需要长文本存储在 mysql 中)根本不会显示,也不会抛出错误。

我想我的问题有两个部分: 1 - 我认为大型数据集是问题的根源是否正确,或者 leaflet.js 应该能够处理这些问题? 2 - 简化此类数据集的最佳方法是什么? Leaflet有这样一种显示区域的算法,但这似乎已经是失败点了。

当我们讨论这个话题时:现在我正在通过拆分数据并将其修补回 javascript 中,将 Nominatim 的 lnglat 多边形转换为 leaflet 的 latlng。有 easier/safer 的方法吗?我是否应该将该任务移至服务器并使用一些 php library/function?

感谢您的帮助!

编辑:忘了说:在多边形渲染失败的情况下,我的控制台给我这个错误:TypeError: t is null

are the large datasets the root of the problem or should leaflet.js be able to handle those?

Leaflet.js 会处理你扔给它的任何东西。但是,您的 网络浏览器 在不降低速度的情况下可以处理的内容是有限的。

请记住,每个现代网络浏览器都有性能分析工具,您可以使用这些工具来查看 Leaflet 代码(或浏览器内部)的哪些部分占用了您的大部分时间。

What would be the best way of simplifying such datasets?

您可能想查看 Douglas-Peucker algorithm 作为这些算法的起点。

请记住,Leaflet 在内部使用此算法来简化每个缩放级别上的多边形,最多一个像素。

对于一些大的复杂多边形,用 Leaflet.VectorGrid 之类的东西将它们切片可能会提高性能。

但是,没有简化数据集的灵丹妙药。最佳方式取决于您使用的具体数据。

on the occasion that the polygon fails to render, my console gives me this error: TypeError: t is null

这是另一回事,可能是 格式不正确的数据

为了显示更漂亮的错误消息,请使用 leaflet-src.js 文件而不是 leaflet.js 文件。从 Leaflet 1.0.0-beta2 开始,leaflet-src.js 有一个 sourcemap,它可以指向各个原始文件,以便更好地调试。