得到响应后在传单上渲染大量动态标记需要大量时间答案

【问题标题】：Rendering a huge number of dynamic markers on leaflet after getting response takes a lot of time得到响应后在传单上渲染大量动态标记需要大量时间
【发布时间】：2020-10-16 05:44:43
【问题描述】：

我正在使用 Leaflet.js 创建带有动态标记的地图视图。每次收到响应时，我都会尝试根据数据创建动态组件并使用 changeDetector 来检测更改。当响应数据不是很大（大约 500kb）时它工作得很好，但是当响应数据超过这个时，标记需要很长时间来渲染。例如，当响应大约为 3-4 Mb 时，大约有 29k 个标记需要 2 分钟才能呈现，因此我的页面需要大约 3-4 分钟才能加载，这不符合要求。

我正在使用 Angular 框架。是否有一些解决方案可以减少传单上动态组件的渲染时间。

【问题讨论】：

标签： angular leaflet

【解决方案1】：

你可以尝试画布模式来提高性能https://leafletjs.com/reference-1.7.1.html#map-prefercanvas

还显式设置L.Canvas() 渲染器https://leafletjs.com/reference-1.7.1.html#map-renderer

如果这没有帮助，您可能需要考虑对标记进行聚类，因为 28k 标记需要处理很多。例如，您可以使用像 https://github.com/Asymmetrik/ngx-leaflet-markercluster 这样的角度库。

【讨论】：

【解决方案2】：

您可以试用Kyrix，它旨在支持大规模标记聚类。它需要与数据库一起工作，但它还提供 Docker 容器化，因此您无需担心安装和维护数据库。

交互式地图上包含 188 万场野火的 Kyrix 应用示例：http://wildfire2.kyrixdemo.live/

【讨论】：