在获得响应后在传单上渲染大量的动态标记需要花费大量的时间

Question

我正在使用leaflet.js创建一个带有动态标记的地图视图。每次收到响应时，我都会尝试基于数据创建动态组件，并使用changeDetector来检测更改。当响应数据不是很大(大约500kb)时，它可以很好地工作，但当响应数据超过这个大小时，标记需要花费大量时间来渲染。例如，当响应在3-4Mb左右时，大约有29k个标记需要2分钟来呈现，因此我的页面需要大约3-4分钟来加载，这并不符合要求。

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

Answer 1

您可以尝试使用canvas模式来提高性能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这样的角库。

Answer 2

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

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