Leaflet: 许多标记的性能不佳

创建于 2018-08-26  ·  3评论  ·  资料来源: Leaflet/Leaflet
  • [x] 我正在报告一个错误，而不是寻求帮助； 支持诸如“我如何用 Leaflet 做 X”之类的问题。 将被关闭（使用Stack Overflow或gis.stackexchange.com提问）
  • [x] 我查看了文档以确保行为被记录在案并符合预期
  • [x] 我确定这是 Leaflet 代码问题，不是我自己的代码问题，也不是我使用的框架（Cordova、Ionic、Angular、React……）
  • [x] 我已经搜索了问题以确保它尚未报告

如何繁殖

  • 我正在使用的传单版本：1.3.4
  • 我使用的浏览器（带版本）：Chromium 68
  • 我正在使用的操作系统/平台（带版本）：Debian Buster
  • 在地图上放置许多标记（例如 1000）
  • 移动或缩放地图

我期待什么样的行为以及我看到什么样的行为

运动的开始被延迟并消耗 100% 的 CPU 内核。 变焦也是如此。 由getBoundingClientRect引起的延迟 si ：

image

重现问题的最小示例

  • [x] 这个例子尽量简单
  • [x] 这个例子不依赖任何第三方代码

https://codepen.io/zdila/pen/YOwoEd

picture zdila

最有用的评论

如果你需要绘制很多标记，你可以尝试 Leaflet.PixiOverlay插件。
（顺便说一下，我是插件作者）

picture manubb 于 2018-08-27
👍4

所有3条评论

嗨@zdila ，

不幸的是，这是 Leaflet 的一个已知限制。
见https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740

Leaflet 使用常规 DOM 元素作为标准标记。
这种简单性有一个缺点：浏览器很难处理数千个。

对于常见的用法（几个 Marker），简单是有优势的。

对于更复杂的用例，解决方法是切换到画布。
应该有一些插件提供其他基于画布的标记，如果您需要比圆形标记更漂亮的东西。

ghybs picture ghybs 于 2018-08-27
👍1

如果你需要绘制很多标记，你可以尝试 Leaflet.PixiOverlay插件。
（顺便说一下，我是插件作者）

manubb picture manubb 于 2018-08-27
👍4

@ghybs感谢您的解释。 我只是想知道是否真的需要调用getBoundingClientRect以及它在 Leaflet 中的用途。

@manubb感谢您提供信息。 我们已经使用 canvas 在地图上显示图片位置： https : 20.126953 &layers=TI

zdila picture zdila 于 2018-08-27
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

jblarsen picture jblarsen  ·  3评论
viswaug picture viswaug  ·  4评论
CallMarl picture CallMarl  ·  3评论
JonnyBGod picture JonnyBGod  ·  4评论
remilev picture remilev  ·  4评论