如何解决如何将 React-Leaflet 与来自 API 的标记与大型数据集一起使用
我们有一个应用程序,我们需要根据用户当前的过滤器在地图上绘制约 13000 多个标记。我发现 react-leaflet 不能很好地处理这么多标记。我什至将所有弹出数据卸载到弹出的单独查询中以减少初始数据负载,但无济于事。
我确实发现使用聚类确实有助于提高性能,所以我启用了它(即使它不在下面的示例代码中)。但即使使用聚类,在初始地图加载时,用户可能需要等待 20 秒才能使用标记呈现地图,但从 GraphQL API 获取的实际数据不到一秒。
我试图找到一种方法来仅获取页面边界框中存在的标记。我成功地做到了这一点,但现在的问题是,即使新边界只是原始边界的一个子集,移动/缩放地图时所有标记也会闪烁(重新渲染)。
代码沙盒:https://codesandbox.io/s/graphql-markers-t409f?file=/src/App.js
有没有办法让 react-leaflet 只重新渲染新的标记而不是所有的标记?我提供了从 api 到 Marker 组件键字段的标记的唯一 ID,但这似乎没有提供任何改进。
我认为处理它的最好方法可能是做一些事情来管理最小东、最大西、最大北和最小南的地图边界,并且只有在新边界超出当前范围时才重新获取提取的区域。这与 10-20% 的区域提取一起,如果地图在任何方向上仅略微移动,则不会重新提取。
注意:我不保证在回答问题后此 GraphQL 后端将可用。此后端有 1Mb/天的数据传输限制,以防此问题出现问题而您看不到标记。请参阅代码和框中的自述文件,了解在 2 分钟内免费在线设置后端的步骤。
如果找不到其他解决方案,可能会有所帮助的一些相关问题:
与Plotting 140K points in leafletjs 不是同一个问题。我正在专门寻找如何更新标记以删除不在新数据提取中的标记并添加以前数据提取中不存在的新标记而不重新呈现现有标记的答案。
查看示例代码,您将看到标记闪烁,因为它们在获取新数据时都会重新呈现。这可能会导致性能和 UX 之间更好的混合,因为我真的不想使用 CircleMarker 并且我已经添加了集群但仍然存在滞后。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。