在Leaflet中点对象使用SVG和Canvas两种模式的对比

目录

前言

一、关于SVG和Canvas

1、SVG知识

2、Canvas知识

3、优缺点

二、SVG和Canvas在Leaflet的使用

1、相关类图

2、Leaflet的默认展示方式

 三、SVG和Canvas实例及性能对比

1、SVG模式及性能对比

 2、Canvas优化

总结


前言

        众所周知,在Leaflet当中,渲染的默认有两种不同的方式,分别是SVG或者Canvas。由于Leaflet需要在不同的设备上进行展示,因此对浏览器的要求不能太高,其默认的渲染引擎基于SVG的实现方式。在一些场景下,需要实现上千的点数据进行展示(与瓦片数据相比,几千的数据量不值一提,但是不知道各位实践过没有,使用Leaflet自带的Marker进行标记展示,在自己的电脑上都卡得一愣一愣的)。

        基于以上的原因,有必要对Leaflet中采用SVG和Canvas两种模式进行渲染的原理和效果做一个基础的对比。本文在之前的一个项目中,用户需要对数据进行免切片(栅格瓦片或者矢量瓦片),直接在Leaflet上进行叠加,数据量大概在5000-8000左右。由于当时不了解Leaflet的底层原理,采用的是Marker的默认实现方式,在系统展示时,效果不是很好。而后采用了网友提供的两种方法进行了优化,实现了信息的展示,也能很好的兼顾性能。

        本文即在此需求背景下产生,本文首先阐述Leaflet中SVG和Canvas两种模式的原理和Leaflet的相关架构,然后通过实例对比marker的不同规模生成对机器的资源占用,最后使用基于Canvas的技术实现了5W-10W级的点数据展示。如果当前您也有这方面的需求,可以来看看本文,如果能顺便解决您的问题更好。

一、关于SVG和Canvas

        既然要对比SVG和Canvas这两种模式,就有必要对这两种模式进行一个简单的介绍。本节就对两种方式进行简单的对比,以及在leaflet当中的继承类图的介绍,让大家有一个直观的了解。

1、SVG知识

        SVG是矢量图形格式,通过DOM元素进行渲染。它可以在任何分辨率下保持清晰的图像质量,因此非常适合用于表示复杂的地理数据,如地图、路径等。然而,由于SVG是基于DOM的,因此在处理大量图形元素时可能会遇到性能问题。

2、Canvas知识

        Canvas通过像素直接进行渲染,不受DOM的限制。它可以在浏览器中实现高效的图形渲染,尤其适合处理大量图形或动画。Canvas的渲染速度通常比SVG更快,因为它直接操作像素而不是通过DOM元素。

3、优缺点

SVGCanvas
渲染速度
要素规模小规模大规模
浏览器兼容度
交互性

        Canvas是通过在HTML5的画布(Canvas)上绘制图形来进行渲染的。它直接在浏览器中操作像素,因此具有很高的性能。Canvas的绘图操作非常快速,可以实现流畅的动画效果。然而,由于它是基于像素的,所以在处理复杂图形和动画时可能会遇到性能瓶颈。SVG则是基于XML的矢量图形格式,它通过DOM元素来呈现图形。这意味着SVG可以与其他HTML元素进行交互,但这也可能带来一定的性能问题。由于SVG是矢量图形,所以无论放大或缩小都不会失真,但这也会增加渲染的复杂性。

        Canvas是基于HTML5标准的一部分,因此在大多数现代浏览器中都得到了很好的支持。这使得Canvas在各种平台上都具有较高的兼容性。SVG也在大多数现代浏览器中得到了很好的支持,并且在旧版本的Internet Explorer中也有插件支持。因此,SVG也具有较好的兼容性。

        Canvas支持的颜色比SVG多,因为它基于像素渲染,可以呈现更多的颜色细节。SVG绘图更容易编辑,只需要增加或移除相应的元素就可以修改图形。这使得SVG在动态内容生成和编辑方面更具灵活性。

        综上所述,Canvas和SVG各有其独特的特点和优势,选择使用哪种技术取决于具体的应用场景和需求。如果需要处理大量图形或动画并保持高性能,Canvas可能是一个更好的选择。而如果需要丰富的视觉效果、交互性和编辑性,SVG可能更适合。

二、SVG和Canvas在Leaflet的使用

        本节将结合Leaflet的相关组件的依赖关系,重点讲讲SVG和Canvas这两种模式的使用场景。

1、相关类图

        这里结合Leaflet官方提供的相关组件继承图来说明两者的继承位置和相关组件的关系。关于这个集成图传送门。感兴趣的朋友可以打开网站进行查阅,下面只贴出与本文相关的组件。

        下面是根据官网给出的例子截图的效果 ,通过上面的这个类图可以很明确的看到,SVG和Canvas都属于Renderer对象,用于在Leaflet中实现不同对象的渲染。与此同时,特别需要注意的Path与Marker对象。在Path对象以下,包含了Polyline、Polygon、CircleMarker、Circle等。而Marker与Path对象并没有直接的关系,从OOP的角度来说,是完全不同的类。这里要非常注意,因为后面导致原生Marker性能问题的所在其实就在这里。因为继承关系导致了渲染方式的不一致。进而影响了不同规模下不同对象的渲染性能。

2、Leaflet的默认展示方式

        首先我们来看一下在Leaflet中关于对象渲染对象的选择,由于其想要兼容大多数的浏览器。因此对兼容性的要求比较高,从第一节的相关知识中可以了解到,SVG的通用性和兼容相对而言是比较好,因此其默认采用的也是基于SVG的渲染方式,这里可以从官网中可以看到:

 三、SVG和Canvas实例及性能对比

        本节将重点采用实例的方式对SVG和Canvas这两种模式进行代码级讲解,同时采用不同规模的数据进行测试和验证,在通一台机器上测试不通渲染方式,不同的数据规模下,两者的性能对比。方便各位读者对渲染效果有一个直观的认识。

        在进行实例展示之前,首先我们对测试涉及的软硬件进行说明:

        操作系统使用:Win7旗舰版、内存12G、测试的浏览器使用Chrome102

1、SVG模式及性能对比

        首先,我们将使用默认的渲染模式,即使用SVG的模式。按照100、1000、3000、5000的数据规模进行测试,看SVG模式的实际承载性能,包括系统卡顿、CPU使用率、内存使用率几个指标。加载代码如下所示:

//定义地图
var map = L.map('map', {//renderer: canvasLabel,preferCanvas: false
}).setView([29.40, 117.40], 6);
for (let i = 0; i < 100; i++) {var title = "重要城市" + Math.random();let c = L.marker(latlng).addTo(showGroup);
}

        其中100是动态展示的,代码仅作为示例:

         100个点渲染速度比较快,没有明显卡顿。下面来看1000个点什么速度。可以发现,1000个点的时候,渲染速度有一定卡顿,同时缩放延迟很严重。CPU已经会飙升到20%。

         继续增加压力,看下3000个点的加载性能。可以看到,3000个点在浏览器中加载非常卡顿,使用鼠标放大或者缩小几乎很卡,有点展示不了的感觉。在自己的机器上,3000几乎是一个极限了。

        CPU直接被拉高,内存的占用还是,CPU的使用率飙升。 通过以上的测试可以看到3000是一个临界值。好一点的硬件可能会高一点。但想展示1W几乎是不可能,不要说缩放,直接加载都要耗时很长。

10010003000
渲染效果一般卡顿
CPU9%20%80%

 2、Canvas优化

        为了使用Canvas的方式来进行展示,这里采用canvaslabel这个组件来演示。与SVG一样,使用同样的平台,数据规模采用5000、10000、30000三个数据规模。

var canvasLabel = new L.CanvasLabel({defaultLabelStyle: {collisionFlg: true,scale: 1,strokeStyle: "#000",fillStyle: "#fff",lineWidth:3}
});//定义地图
var map = L.map('map', {renderer: canvasLabel
}).setView([29.40, 117.40], 6);var count = 5000;
for (let i = 0; i < count; i++) {let latlng = L.latLng(23.95 + Math.random() * 10, 112.40034 + Math.random() * 15);var content = "<strong>名称:</strong>城市"+i + "<br/><strong>级别:</strong>"+ i;content += "<br/><strong>所属行政区划:</strong>"+ i + "/" ;content += "<br/><strong>评定时间:</strong>"+ i ;var title = "重要城市" + Math.random();let c = L.circleMarker(latlng, {radius: 5,labelStyle: {text: title,rotation: 0,zIndex: 1,//minZoom : 6,strokeStyle: "red",}}).addTo(showGroup);c.bindPopup(content);
}map.addLayer(showGroup);

        在浏览器中直接运行实例,可以看到5000个点也是瞬间展示。

         除了加载时间,CPU的使用率也不是很高。下面来看10000个点的加载情况。可以看到1w个点的加载情况下,与5000个点加载的速度几乎没有区别,可以看到canvas的展示为例。再来看下3w的加载情况如何:

        3w数据规模,加载需要一点时间,但是可以接收,同时可以在界面上进行缩放,虽然有一点延迟,但总体可以接受。继续加大数据规模,在8W到10W之间的规模,基于Canvas可以进行轻松应对。可以满足展示需求。 

50001000030000
渲染效果稍微慢一点
CPU8%10%12%

        通过以上的实验结果表明,使用Canvas的渲染方式比使用SVG的渲染模式,具备更多的数据点支持。可以实现10倍的数据规模展示甚至更多。使用SVG到5000点,已经是一个瓶颈,而Canvas则才刚刚开始展示其威力。综上所述,根据您的实际业务需求,如果使用的大量的点来进行免切标注,可以直接采用上述的这种模式。

总结

        以上就是本文的主要内容,本文首先阐述Leaflet中SVG和Canvas两种模式的原理和Leaflet的相关架构,然后通过实例对比marker的不同规模生成对机器的资源占用,最后使用基于Canvas的技术实现了5W-10W级的点数据展示。如果当前您也有这方面的需求,可以来看看本文,如果能顺便解决您的问题更好即是缘分。行文仓促,定有不足之处,欢迎各位专家朋友在评论区批评指正,不胜感激。

文中参考了以下内容,感谢博主的思路,其它朋友可以参考:

1、leaflet大量marker卡顿_leaflet如何加载10万数据。

2、leaflet如何加载10万条数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/324663.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用于视频识别的快慢网络

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;用于视频识别的快慢网络1、文献摘要2、提出方法2.1、SlowFast模型2.2、SlowFast 提出思想 3、相关方法3.1、时空间卷积3.2、基于光…

深入解析RedisSearch:全文搜索的新维度

码到三十五 &#xff1a; 个人主页 在当今的数据时代&#xff0c;信息的检索与快速定位变得尤为关键。Redis&#xff0c;作为一个高性能的内存数据库&#xff0c;已经在缓存和消息系统中占据了重要地位。然而&#xff0c;Redis并不直接支持复杂的搜索功能。为了填补这一空白&am…

零代码平台助力中国石化江苏油田实现高效评价体系

概述&#xff1a; 中国石化集团江苏石油勘探局有限公司面临着评价体系依赖人工处理数据、计算繁琐且容易出错的挑战。为解决这一问题&#xff0c;他们决定借助零代码平台明道云开发江苏油田高质量发展经济指标评价系统。该系统旨在实现原始数据批量导入与在线管理、权重及评分…

Redis单机安装

1.编译 cd redis安装目录 makemake install2.修改配置文件redis.conf #端口修改 port 6379 #后台进程启动 yes daemonize yes # daemonize no #注释掉 为了可以远程连接 #bind 127.0.0.1 #设置密码 requirepass pwd3.启动 ./redis-server ../redis.conf查看进程 [rootlocal…

【Linux】从零开始认识动静态库 -动态库

送给大家一句话&#xff1a; 我不要你风生虎啸&#xff0c; 我愿你老来无事饱加餐。 – 梁实秋 《我把活着欢喜过了》 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ଘ(੭ˊᵕˋ)੭…

【小红书采集软件】根据关键词批量爬取小红书笔记正文、笔记链接、发布时间、转评赞藏等

一、背景介绍 1.1 爬取目标 熟悉我的小伙伴可能了解&#xff0c;我之前开发过2款软件&#xff1a; 【GUI软件】小红书搜索结果批量采集&#xff0c;支持多个关键词同时抓取&#xff01; 【GUI软件】小红书详情数据批量采集&#xff0c;含笔记内容、转评赞藏等&#xff0c;支…

用大于meilisearch-java-0.7.0.jar的报错的解决

Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重量级&#xff0c;适合大数据量。 MeiliSearch 设计目标针对数据在 500GB 左右的搜索需求&#xff0c;极快&#xff0c;单文件&#xff0c;超轻量。 所以&#xff0c;对于中小型项目来说…

数组元素翻倍C++

编写一个 C 程序&#xff0c;实现一个功能&#xff0c;即将数组中的每个元素值翻倍。程序应定义一个函数 doubleArray&#xff0c;该函数接收一个整数数组的指针和数组的大小&#xff0c;然后将数组中的每个元素都翻倍。 代码 #include <iostream>void doubleArray(int…

Rust使用HashSet对Vec类型的元素进行去重

在Rust语言中&#xff0c;对Vec类型的元素进行去重&#xff0c;一种常见的方法是使用一个HashSet来帮助我们快速检查元素是否已经存在。以下是使用HashSet对Vec进行去重的示例代码&#xff1a; use std::collections::HashSet;fn main() {let vec_numbers vec![1, 2, 2, 3, 4…

Softing工业推出的edgeConnector将Allen-Bradley控制器集成到工业边缘应用中

2024年4月17日&#xff08;哈尔&#xff09;&#xff0c;Softing宣布扩展其基于Docker的edgeConnector产品系列&#xff0c;推出了新软件模块edgeConnector Allen Bradley PLC&#xff0c;可方便用户访问来自ControlLogix和CompactLogix控制器数据。 &#xff08;edgeConnector…

i春秋-Test

题目 解题 参考WP https://blog.csdn.net/qq_40654505/article/details/107142533/目录扫描 复现wp payload为&#xff1a; search.php?searchtype5&tid&areaeval($_POST[cmd])使用蚁剑连接 http://eci-2ze4iyhwj7xvb68bsb2t.cloudeci1.ichunqiu.com:80/search.ph…

TikTok机房ip好还是住宅ip好?

住宅ip比较好&#xff0c;机房数据中心IP高效、低价&#xff0c;所以使用的人多且用处复杂&#xff0c;这类ip极大可能存在滥用的黑历史&#xff0c;通过此类ip访问tiktok&#xff0c;被禁止的可能性更高&#xff0c;更容易被拉入黑名单。所以我们推荐tiktok独享原生ip搭建节点…

AI写作推荐-写文ai-AI在线写作生成器-3步完成写作任务

AI写作利器&#xff1a;推荐几款神助攻文案创作工具 随着技术的进步&#xff0c;人工智能&#xff08;AI&#xff09;已达到高级水平&#xff0c;在众多领域展现其强大能力。 在文本创作的领域&#xff0c;人工智能&#xff08;AI&#xff09;应用已显著地提升了写作效率和创意…

java--io流(二)

一、打印流&#xff08;PrintStream[字节]、PrintWriter[字符]&#xff09; &#xff08;基本上可以代替前面所学的字节、字符输出流&#xff09;&#xff0c;二者关于打印数据功能相同&#xff08;都方便且高效&#xff09;&#xff0c;但是关于数据写出不同&#xff0c;前者…

上位机图像处理和嵌入式模块部署(树莓派4b和qt应用全屏占有)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道&#xff0c;嵌入式应用一般都是为了某一个特定应用而存在的。也就是说&#xff0c;和pc不同&#xff0c;这个嵌入式板子一般都是为了解…

图像ISP——AGC参数解析

前言 AWB和AGC是两种常见的自动调整功能。AWB用于自动调整图像的白平衡&#xff0c;以确保颜色在不同光照条件下仍然看起来自然。而AGC则用于自动调整图像的增益&#xff0c;以在不同的亮度条件下保持适当的曝光。 代码例程 static AWB_AGC_TABLE_S g_stAwbAgcTable {/* bvali…

Android解放双手的利器之ViewBinding

文章目录 1. 背景2. ViewBinding是什么3. 开启ViewBinding功能4. 生成绑定类5. 使用ViewBinding5.1Activity 中使用5.2 Fragment 中使用5.3 ViewHolder 中使用 6. ViewBinding的优点7. 与 dataBinding 对比 1. 背景 写代码最繁琐的是什么&#xff1f;重复的机械操作。我们刚接…

Docker搭建ctfd平台

安装docker和docker-compose &#xff08;1&#xff09;安装docker&#xff1a; curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun&#xff08;2&#xff09;安装 Docker Compose&#xff1a; yum install docker-compose安装失败参考下面文章 https:/…

二叉搜索树模拟实现

目录 认识二叉搜索树&#xff1a; 模拟实现&#xff1a; 节点结构体构建&#xff1a; insert&#xff08;插入&#xff09;: find&#xff08;查找&#xff09;&#xff1a; erase&#xff08;删除&#xff09;&#xff08;重点&#xff09;&#xff1a; 全部代码 认识二叉…

第十一讲:指针(3)

第十一讲&#xff1a;指针&#xff08;3&#xff09; 1.字符指针变量1.1存储一个字符1.2存储一个字符串1.3一个有趣的面试题 2.数组指针变量2.1什么是数组指针变量2.2数组指针变量的初始化 3.二维数组传参的本质4.函数指针变量4.1介绍函数指针变量4.2 两段有趣的代码4.2.1代码1…