如何始终远离视口传单折线？

Question

每当我移动传单地图上的视图时，中心不再在视图中的多段线将被删除。我有一条笔划大小较大 (~500px) 的折线，即使它的一部分应该是不可见的。拖动地图时也可以观察到同样的问题，在拖动结束之前不会重新绘制多段线。示例如下。

我已尝试为传单 remove 事件添加侦听器，但未触发。我还尝试覆盖折线的 onRemove 方法，但这没有用。现在为了解决这个问题，我将地图设置得比屏幕大，但这会导致速度变慢。

我认为从地图中删除不可见的折线是一项性能功能。有谁知道这是否可以禁用？

Answer 1

我需要设置 L.Path.CLIP_PADDING。

通过查看 github 存储库中已解决的问题找到。 https://github.com/Leaflet/Leaflet/issues/2814.

也在文档中：http://leafletjs.com/reference.html#path-clip_padding

"How much to extend the clip area around the map view (relative to its size, e.g. 0.5 is half the screen in each direction). Smaller values mean that you will see clipped ends of paths while you're dragging the map, and bigger values decrease drawing performance."

Answer 2

是的，正如你所说的折线，geoJSON 只会在收到“dragend”事件后重绘，所以即使在拖动过程中我们也必须重绘，我们可以轻松实现通过编写以下代码

map.on('drag', () => {
  map.fitBounds(map.getBounds());
});

甚至 L.Path.CLIP_PADDING 都不适合我。但有力地设定界限对我有用。另外，请参阅 demo here.

如何始终远离视口传单折线？

How to keep out of viewport leaflet polylines rendered at all times?

javascript

svg

leaflet

polyline