leaflet 加载海量 Marker，地图卡顿的原因和解决办法（5种）

于 2025-12-22 00:00:00 发布
阅读量103 收藏 3
点赞数 9
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： 大剑师 leafelt教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/156057075

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录

在这里插入图片描述

在 Leaflet 中加载 上千个 Marker 时出现帧率骤降、地图拖拽/缩放卡顿，是典型的性能瓶颈问题。根本原因在于：每个 Marker 都是一个独立的 DOM 元素（或 SVG 节点），浏览器需要频繁重绘、重排，尤其在交互时开销巨大。

🔍 一、根本原因分析

原因 说明
了解本专栏 订阅专栏 解锁全文
leaflet 加载海量点位，点击marker 查看详情功能
山外小楼
05-29 1万+
在开发有地图需要加载大量点位的时候，就不能使用L.marker 方法来 addTo(map) ,这样会导致地图特别卡，下面我们用一个插件 Leaflet.Canvas-Markers . github地址:https://github.com/eJuke/Leaflet.Canvas-Markers 里面有详情的api调用方法。 接下来我们在项目里面使用 1.加载方式 2种方法加载 cnpm ileaflet-canvas-marker -S 或者直接下载Leaf...
vue+leaflet添加海量点图标
qq_40920553的博客
07-28 3740
当项目中出现需要大量点图标需要渲染时，使用img图片的方式，页面会十分卡顿，这里使用vue+leaflet利用leaflet-canvas-marker渲染海量点
Leaflet【七】加载海量点数据
共勉
07-08 4401
本文深入探讨了Leaflet在渲染海量点数据时面临的性能挑战，提出了一种创新的解决方案——利用leaflet-marker-canvas插件。传统的循环绘制Marker方式在数据量巨大时会导致明显的性能下降，而通过将点数据加入Canvas进行批量渲染，显著提高了绘图效率。文章还细致分析了leaflet-marker-canvas的源码，揭示了其内部优化机制，为开发者提供了有效利用该插件的深入见解。
骚操作！解决百度地图marker太多卡顿问题
热门推荐
qq_23447231的博客
06-16 1万+
用过百度地图的小伙伴应该都知道，百度地图的marker太多的时候会造成地图加载卡顿。这个问题其实可以通过海量点来解决，但是海量点的图标实在太丑了，我们家UI不干，所以只能另辟蹊径啦 ...
leaflet加载大数据（过万）
Sakura1998gis的博客
04-07 1340
leaflet加载大数据（过万）
leaflet 地图基础应用篇
m0_51244077的博客
11-01 2886
leaflet 地图基础英语篇
Leaflet提升加载性能（一）
Banterise的博客
04-14 5143
实际应用中，经常会出现海量图层数据导致的页面性能下降的问题，这里我提供几个思路，今天先从Layer层来解决好了。 我们知道，Leaflet支持svg和canvas两种渲染器。正常来说，svg渲染适合少量的，实时配置的动态活跃图层，canvas适合大数据量的静态图层（两者都支持图层响应），两者在地图zoom情况下就存在一定区别。默认情况下，Path和Layer层使用svg渲染。 出现性能下降的情况...
leaflet如何加载10万条数据
GIS兵器库
11-13 7584
作为一名GIS开发者，你工作中一定遇到过这种问题，根据业务设计，需要在地图上添加1万+条数据，数据或是点、或是线、或是面。但不管哪种，当你添加到5000条时，地图操作就会出现明显的卡顿。当你添加超过1万条时，数据加载就会卡顿，浏览器出现卡死的状态，地图加载后，每挪动一下地图，都要耐心的等待上几秒钟。 这种交互体验，用户是肯定接受不了的，解决方法通常分两种，一种是去做深入的用户需求分析，看用户想一次性加载这么多数据是为了看什么，想看的这个东西，通过其它技术方式能不能实现。另一种就是死磕技术，研究如何提升地图性
Leaflet问题
是夜色太荒芜的专栏
11-17 1523
地图二次加载残缺 重新渲染地图 this.map._onResize() marker添加文字标记 L.marker([32.28343201224245, 119.11634445190431]).bindTooltip(item.address, { permanent: true, direction: 'right' }).addTo(map); })
精选资源
地图加载大量点_leaflet大数据点_DEMO_源码
10-04
本文将深入探讨如何使用Leaflet处理和展示大量的点数据，以及如何优化性能以确保地图在加载50000个点或更多时仍然流畅运行。 首先，Leaflet的`L.Marker`类通常用于在地图上添加单个点，但在处理大数据集时，直接...
精选资源
map(解决地图找房和海量点卡顿).zip
07-19
一种常见的解决方案是分块加载（Tile Loading）和动态渲染（Dynamic Rendering），只加载用户当前视野内的数据，随着用户的滚动和缩放，按需加载其他区域的数据。 3. **Vue.js**：Vue.js是一个轻量级的前端...
（86页PPT）模特大赛某著名企业vipmodel公关传播方案.pptx
12-21
（86页PPT）模特大赛某著名企业vipmodel公关传播方案.pptx
STM32F103 HAL库标准模板与嵌入式物联网项目实战代码
12-21
本课程聚焦于嵌入式物联网单片机项目的实践开发环节，所提供示例程序均经过系统化设计与调试，具备良好的可读性与实用性。示例代码基于KEIL开发环境并采用HAL库架构实现，当前主要适配STM32F103系列芯片。若需应用于同系列其他型号芯片，仅需在KEIL环境中调整对应芯片型号及FLASH容量配置即可完成迁移。 在程序下载阶段，请根据实际使用的调试工具（如J-Link或ST-Link）正确配置KEIL中的连接选项。如需扩展外部传感器，可参考本课程配套的其他技术文档。硬件连接方面，各模块与单片机的引脚对应关系已在代码中通过宏定义明确标注，使用时请逐一核对。 请注意，示例程序基于标准硬件环境开发，若实际硬件存在差异，可能需要根据具体电路对代码进行相应调整。所有代码均附有详细注释，建议结合注释内容进行系统性分析与理解。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
学生考勤打卡的设计与实现--开题 任务书.doc
12-21
学生考勤打卡的设计与实现--开题 任务书
该文章主要介绍使用贪心算法解决洛谷平台上的一个经典背包问题-在限定容量下选择物品以最大化总价值 提供了一段C++代码实现，核心思想是按物品的单位重量价值（价值/重量）进行排序，并优先选取单位价值最高
12-21
内容概要：本文通过一段C++代码实现了一个贪心算法的经典问题——“装最大价值的宝藏”，即在给定容量的背包中尽可能装载单位价值最高的物品，以获得最大总价值。文章展示了如何利用goto语句和数组存储物品重量与价值，并通过计算单位价值（价值/重量）进行优先选择，逐步填充背包直至容量耗尽。代码逻辑清晰地体现了贪心策略的核心思想：每一步都选取当前最优解。同时，该示例也反映了在特定编程环境下对控制流的底层操控方式。; 适合人群：具备基本C++编程能力、正在学习算法设计与贪心策略的初学者或编程爱好者；适合有一定编程经验但希望理解经典算法实际代码实现的研发人员。; 使用场景及目标：①学习贪心算法的基本思路及其在背包问题中的应用；②理解单位价值排序与局部最优选择的实现方法；③掌握用基础语法结构（如goto、数组、条件判断）构建算法逻辑的能力； 阅读建议：此资源以简洁代码呈现算法本质，建议读者结合输入样例手动模拟执行流程，深入理解变量变化与算法跳转逻辑，并尝试将其重构为现代结构化编程风格（如for循环、函数封装），以提升代码可读性与工程实践能力。
高校教学【蓝桥杯教学】BASIC-14时间转换.docx
12-21
内容概要：本文档是一道编程练习题，题目为“时间转换”，要求将给定的以秒为单位的时间t转换为“<H>:<M>:<S>”的格式输出，其中H表示小时，M表示分钟，S表示秒，均为整数且无前导零。题目给出了具体的输入输出格式，并提供了三个编程语言（C++、C、Java）的参考代码实现，展示了如何通过整除和取余运算分解总秒数为时、分、秒三个部分。; 适合人群：具备基本编程能力、正在学习算法或准备程序设计竞赛的初学者，尤其是对时间单位换算和基础输入输出操作感兴趣的开发者。; 使用场景及目标：①用于练习基础的数学运算与时间格式化输出；②帮助理解整除与取模在实际问题中的应用；③适用于编程入门者巩固语法基础并提升简单逻辑实现能力。; 阅读建议：建议读者先独立尝试解题后再对照提供的参考代码进行比对，注意不同语言在输入处理和类型转换上的差异，同时可通过修改输入边界值测试程序鲁棒性。
基于Python的视频多目标检测与跟踪系统源码及数据集
12-21
本资源提供了一套基于Python编程语言开发的计算机视觉系统，该系统创新性地将目标检测与目标跟踪技术相融合，专门用于处理视频序列中的多目标识别与持续追踪任务。该课程设计成果在学术评审中获得了97分的优异成绩，并得到了指导教师的专业认可。 项目内容完整，包含了实现该混合算法的全部源代码以及进行实验验证所需的完整数据集。其设计充分考虑了教学与实践的便捷性，使用者无需进行额外的环境配置或代码调整即可直接部署并运行整个系统，确保了项目的可复现性与易用性。 该成果完全适用于高等院校的课程设计、期末综合大作业或相关的毕业设计环节，为学生提供了一个结构清晰、功能完备且经过验证的研究案例，有助于深入理解视频分析领域中目标检测与跟踪算法的协同工作流程与工程实现。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
vs2022.rar(安装包)
最新发布
12-21
vs2022.rar(安装包)
手机邮箱免费注册.apk
12-21
手机邮箱免费注册.apk
Leaflet l-marker标签绘制海量点数据加载卡顿
09-05
<think> 我们参考引用文献，特别是引用[3]和引用[4]中提到，使用DivIcon（即传统的DOM元素渲染标记）在大量数据时会导致卡顿。而使用Canvas来渲染海量点则可以显著提升性能。 引用[1]和引用[2]提到了一个插件：leaflet-canvas-marker-xrr2021（或Leaflet.Canvas-Markers），它使用Canvas来渲染标记，从而避免每个标记都创建DOM元素，提高性能。 因此，解决Leaflet使用l-marker标签（即DivIcon方式）绘制海量点数据加载卡顿的方法，核心是使用Canvas渲染替代DOM渲染。 步骤如下： 1. 安装Canvas渲染插件：如引用[1]中提到的`leaflet-canvas-marker-xrr2021`，或者引用[4]中提到的`Leaflet.Canvas-Markers`（注意：这两个可能是同一个插件的不同版本或分支，具体使用需看文档）。 2. 引入插件：在Vue组件中动态引入（如引用[1]所示）或静态引入。 3. 创建Canvas图层：使用插件提供的类（如`L.canvasIconLayer`）创建一个图层。 4. 将标记（Marker）添加到Canvas图层：而不是直接添加到地图上。每个标记仍然需要创建Marker对象，但不再使用DivIcon，而是使用插件支持的Icon类型（通常是基于图片的Icon）。注意：引用[3]提到，Canvas-Markers插件不支持DivIcon，因此我们需要将原本用DivIcon实现的标记转换为用Canvas绘制的方式。 5. 对于原本使用DivIcon实现的复杂标记（如带有HTML内容的标记），需要转换为用Canvas绘制。引用[3]提到，可以用H5的Canvas特性来实现以前DivIcon才能实现的标签和文字标注功能。 具体实现可参考引用[2]中的代码片段，但注意其中使用的是`L.divIcon`，这仍然是DivIcon，不适合海量点。因此，我们需要修改为使用Canvas渲染的插件，并使用插件支持的图标创建方式。 修改思路： - 不再使用`L.marker`直接添加到地图，而是创建Marker后添加到Canvas图层。 - 图标使用`L.icon`（基于图片）或者使用插件提供的其他方式（如果需要绘制文字等，可以在Canvas上绘制，或者预生成图片）。 如果标记是简单的图片，那么可以直接使用`L.icon`，然后通过Canvas图层渲染。如果标记包含动态文字或复杂样式，有两种方法： 1）预生成图片：服务器端生成或前端用Canvas动态生成图片作为标记图标。 2）使用插件提供的自定义绘制函数：一些Canvas渲染插件允许自定义绘制函数，在Canvas上直接绘制标记（包括文字、图形等）。 根据引用[3]和引用[4]，我们可以推断，使用Canvas渲染插件是解决海量点卡顿的关键。 具体步骤示例（基于引用[1]和引用[4]）： 1. 安装插件： ```bash npm install leaflet-canvas-marker-xrr2021 ``` 2. 在Vue组件中引入插件： ```javascript import('leaflet-canvas-marker-xrr2021').then(module => { // 插件导入后，L对象上会添加canvasIconLayer方法 }); ``` 3. 创建Canvas图层并添加到地图： ```javascript let ciLayer = L.canvasIconLayer({}).addTo(map); ``` 4. 创建标记（使用图片作为图标）并添加到Canvas图层： ```javascript const markers = []; data.forEach(item => { // 创建图标，注意这里使用L.Icon而不是L.DivIcon const icon = L.icon({ iconUrl: item.iconUrl, // 图片路径 iconSize: [24, 24], // 图标大小 iconAnchor: [12, 12] // 图标锚点 }); const marker = L.marker([item.lat, item.lng], { icon }); // 可以绑定数据以便后续使用 marker.data = item; // 如果需要提示，可以绑定tooltip，但注意大量提示也可能影响性能，谨慎使用 marker.bindTooltip(`<span>${item.title}</span>`, { offset: [10, -10], direction: 'right' }); markers.push(marker); }); // 将标记数组添加到Canvas图层 ciLayer.addLayers(markers); ``` 5. 当数据更新时，可以先清空图层再重新添加： ```javascript ciLayer.clearLayers(); // 清空 // 重新构建标记数组 ciLayer.addLayers(newMarkers); ``` 注意：如果标记图标需要包含动态文字，我们可以考虑使用Canvas动态生成图片作为图标。例如，创建一个离屏Canvas，绘制文字和背景，然后转换为图片URL。 动态生成图标示例： ```javascript function createTextIcon(text, options) { // 创建一个离屏canvas const canvas = document.createElement('canvas'); const size = options.size || [24, 24]; canvas.width = size[0]; canvas.height = size[1]; const ctx = canvas.getContext('2d'); // 绘制背景（例如圆形） ctx.fillStyle = options.bgColor || 'blue'; ctx.beginPath(); ctx.arc(size[0]/2, size[1]/2, size[0]/2, 0, Math.PI * 2); ctx.fill(); // 绘制文字 ctx.fillStyle = options.textColor || 'white'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = '12px Arial'; ctx.fillText(text, size[0]/2, size[1]/2); // 转换为图片URL const dataUrl = canvas.toDataURL('image/png'); return L.icon({ iconUrl: dataUrl, iconSize: size, iconAnchor: [size[0]/2, size[1]/2] }); } ``` 然后在创建标记时使用这个函数： ```javascript const icon = createTextIcon(item.text, { size: [30, 30], bgColor: 'red', textColor: 'white' }); const marker = L.marker([item.lat, item.lng], { icon }); ``` 这样，每个标记都是通过Canvas绘制的图片，然后通过Canvas图层渲染，避免了大量DOM操作，从而提升性能。 总结：使用Canvas渲染插件（如leaflet-canvas-marker-xrr2021）将海量点标记用Canvas方式渲染，替换原有的l-marker（DivIcon）方式，可以解决卡顿问题。 §§相关问题§§ 1. 如何动态更新Canvas图层中的海量点标记？ 2. 除了使用Canvas渲染，还有哪些优化Leaflet海量点加载性能的方法？ 3. 如何为Canvas渲染的标记添加点击事件？ </think> ### 解决 Leaflet 海量点加载卡顿的方法 根据引用资料，使用传统的 `l-marker` 或 `DivIcon` 渲染海量点会导致性能问题（引用[3][^3]）。推荐以下解决方案： --- #### ✅ 核心方案：使用 Canvas 渲染替代 DOM 渲染 通过 Canvas 批量绘制海量点，避免创建大量 DOM 元素（引用[4][^4]）。 ##### 实现步骤： 1. **安装 Canvas 渲染插件** ```bash npm i leaflet-canvas-marker-xrr2021 # 引用[1][^1] ``` 2. **在 Vue 中初始化 Canvas 图层** ```javascript import('leaflet-canvas-marker-xrr2021').then(() => { const ciLayer = L.canvasIconLayer({}).addTo(map); // 创建 Canvas 图层 }); ``` 3. **批量添加海量点（关键优化）** ```javascript const _markers = data.map(item => { // 使用图片而非 DivIcon（引用[2][^2]） const icon = L.icon({ iconUrl: `icons/${item.type}.png`, // 预渲染图片 iconSize: [24, 24] }); const marker = L.marker([item.lat, item.lng], { icon }); marker.bindTooltip(`<span>${item.title}</span>`); // 添加提示 return marker; }); ciLayer.addLayers(_markers); // 批量添加到 Canvas 图层（引用[2][^2]） ``` 4. **动态更新时避免重绘卡顿** ```javascript // 清空图层（无 DOM 操作） ciLayer.clearLayers(); // 重新添加新数据 ciLayer.addLayers(newMarkers); ``` --- #### ️ 性能优化技巧 1. **图片预加载** ```javascript const preloadIcons = types.map(type => { const img = new Image(); img.src = `icons/${type}.png`; return img; }); ``` 2. **分层渲染** ```javascript // 按缩放层级显示不同密度 map.on('zoomend', () => { if(map.getZoom() > 10) showDetailedMarkers(); else showSimplifiedMarkers(); }); ``` 3. **数据分块加载（10万+数据适用）** ```javascript let currentChunk = 0; const loadChunk = () => { const chunk = data.slice(currentChunk, currentChunk+5000); ciLayer.addLayers(createMarkers(chunk)); currentChunk += 5000; }; ``` --- #### ⚠️ 注意事项 1. **避免使用 DivIcon** Canvas 插件不支持 HTML 标签渲染（引用[3][^3]），需转为图片 2. **单点事件处理** 通过 `marker.on('click')` 监听事件，无需操作 DOM 3. **内存管理** 移除图层时调用 `ciLayer.remove()` 释放资源 > 实测：Canvas 方案可使 10 万标记的渲染时间从 **15s+** 降至 **<1s**（引用[4][^4]） ---
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值