在Leaflet.js中跨越antimeridian包装线条/多边形

Question

有没有办法让一个形状从一条边穿过日期线子午线(180°经度)到Leaflet.js中出现在地图的另一侧？

我看过:

• http://leafletjs.com/reference.html#latlng-wrap
• https://github.com/Leaflet/Leaflet/issues/82

但我不确定我能做些什么来让它可靠地划过日期线......

先感谢您!

Answer 1

哦,你正在打击antimeridian文物.你不是第一个,也不会是最后一个.

在Leaflet中,基本上有两种解决此问题的方法:

1a:事先剪切多边形

如果您了解GIS工具,请预处理多边形,这样您最终会得到两个(或可能更多)多边形.请参阅"如何在世界范围内制作折线？".

一旦你有一个文件有几个不穿过antimeridian的多边形,它们应该渲染得很好.如果要对多边形应用边框,则会击中伪影(即,反射影像的垂直多边形边界,跨越多边形内部),因此如果要渲染,可能需要使用多边形边缘剪切多边形和折线两个都很好.

1b:在浏览器上剪切多边形

如果您不想事先剪切多边形,可以让Web浏览器动态执行.

有一些实用程序可以在这里提供帮助,但我将特别指向Leaflet.VectorGrid.通过利用geojson-vt,它可以将多边形及其边缘切割成平铺大小的多边形和多边形边缘.它可以很好地处理穿过antimeridian的几何形状.

您可能希望直接查看geojson-vt,或者也许是turf.js来进行一些动态地理处理.

2:超出[-180..180]范围思考

传单可以处理[-180..180]范围之外的经度.在Leaflet中,经度仅TileLayer包裹瓷砖,而不包括标记或折线.

换句话说:标记at [0, -179]显示在不同的位置[0, 181].请参阅此答案以获取示例.

换句话说:从线[0, 179]到[0, -179]是358度长,但是从线[0, 179]到[0, 181]是二度长.

换句话说:你可以使用带有经度[-180..180]范围之外的坐标的线串或多边形,这对于Leaflet来说很好.对于很多GIS软件来说这并不好(事实上,我认为新的GeoJSON规范禁止它).但它会让Leaflet感到高兴.