Leaflet.js和复杂多边形

时间:2017-01-24 07:22:50

标签: leaflet nominatim

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

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

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

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

当我们谈论这个主题时:现在我将Nominatim的lnglat多边形转换成传单的latlng,将数据拆分并在javascript中重新拼接。有更容易/更安全的方法吗?我是否应该将该任务移动到服务器并使用一些php库/函数?

感谢您的帮助!

编辑:忘记提及:在多边形无法渲染的情况下,我的控制台给出了这个错误: TypeError:t为null

1 个答案:

答案 0 :(得分:1)

  

是问题根源的大型数据集还是leaflet.js能够处理这些数据集?

Leaflet.js会处理你扔的任何东西。但是, Web浏览器可以处理的内容有限,而不会降低速度。

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

  

简化此类数据集的最佳方法是什么?

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

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

对于一些复杂的大型多边形,用Leaflet.VectorGrid之类的方法对其进行切片可能会提高性能。

然而,没有简化数据集的灵丹妙药。最好的方法取决于您使用的具体数据。

  

在多边形无法渲染的情况下,我的控制台给出了这个错误:TypeError: t is null

这是另一回事,可能是格式错误的数据的症状

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