在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.mzph.cn/diannao/8435.shtml

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

相关文章

Datasophon基于dinky1.0.1升级到dinky1.0.2

1.首先下载dinky1.0.2版本 dinky1.0.2下载地址 2.关闭dinky1.0.1 3.升级dinky1.0.2 3.1 解压dinky1.0.2.ta.gz tar -xzvf dinky-release-1.16-1.0.2.tar.gz -C /opt/datasophon/rm -rf dinky-release-1.16-1.0.2.tar.gz复制dinky1.0.1的配置文件到dinky1.0.2目录 cp /op…

Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)

Flutter笔记 Widgets Easier组件库&#xff08;11&#xff09;使用提示吐丝 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …

贪心,CF721 D. Maxim and Array

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 721D - Codeforces 二、解题报告 1、思路分析 如果我们当前乘积…

微信云小程序快速上手云数据库+云函数+云存储的操作

&#x1f680; 作者 &#xff1a;“二当家-小D” &#x1f680; 博主简介&#xff1a;⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人&#xff0c;8年开发架构经验&#xff0c;精通java,擅长分布式高并发架构,自动化压力测试&#xff0c;微服务容器化k…

Options API:选项式 API改成Composition API:组合式 API的留言板

让我欢喜让我忧 改成Composition API:组合式 API的代码&#xff0c; <template><!-- start --><span class"span_checkbox">操作<input type"checkbox" v-model"showInput" value"操作" /></span><…

大型语言模型(LLMs)是怎样“学习”的?一封给网络工程师的大模型指南

数字时代&#xff0c;人工智能&#xff08;AI&#xff09;及其相关技术正日益成为许多领域的热门话题。其中&#xff0c;生成式人工智能&#xff08;Gen AI&#xff09;和大型语言模型&#xff08;LLMs&#xff09;引起了广泛的兴趣和讨论。然而&#xff0c;尽管这些术语在科技…

哪些博客类型是最受欢迎的?

在创建博客时&#xff0c;您可能会想到的最常见的问题之一是哪些是最受欢迎的博客类型&#xff1f;有许多不同类型的博客涉及广泛的主题&#xff0c;兴趣和受众。对于一个成功的博客&#xff0c;你需要提前计划并选择适合你的利基市场。在本文中&#xff0c;我们将分享您可以立…

旋转矩阵(将坐标轴旋转)

旋转矩阵&#xff08;将坐标轴旋转&#xff09; 在二维空间中&#xff0c;旋转可以用一个单一的角 定义。作为约定&#xff0c;正角表示逆时针旋转。把笛卡尔坐标的列向量关于原点逆时针旋转的矩阵是&#xff1a; 原坐标系下 坐标系逆时针旋转β 补充 sin(-a) -sin(a) co…

Google Pixel4手机刷机+Root+逆向环境详细教程

Google Pixel4手机刷机Root逆向环境配置详细教程 刷机工具下载 Windows10、Google Pixel4手机当前安卓10系统、adb工具、要刷的谷歌原生的Android11最新刷机包、安装google usb驱动、美版临时twrp-3.6.0_11-0-flame.img和美版永久twrp-installer-3.6.0_11-0-flame.zip、Magis…

程序员有什么实用神器?

程序员的实用神器 在软件开发的海洋中&#xff0c;程序员的实用神器如同航海中的指南针&#xff0c;帮助他们导航、加速开发、优化代码质量&#xff0c;并最终抵达成功的彼岸。这些工具覆盖了从代码编写、版本控制到测试和部署的各个环节。 程序员常用的一些神器包括&#xf…

C语言(递归)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…

数据结构——实现通讯录(附源码)

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 点击主页&#xff1a;optimistic_chen和专栏&#xff1a;c语言&#xff0c; 创作不易&#xff0c;大佬们点赞鼓…

layui的treeTable组件,多层级上传按钮失效的问题解决

现象描述: layui的treeTable 的上传按钮在一层能用&#xff0c;展开后其他按钮正常点击&#xff0c;上传按钮无效。 具体原因没有深究&#xff0c;大概率是展开的子菜单没有被渲染treeTable的done管理到&#xff0c;导致没有重绘上传按钮。 解决方案: 不使用layu的上传组件方法…

C语言常见的动态内存错误及几个经典笔试题以及c/c++内存开辟空间等的介绍

文章目录 前言一、常见的动态内存错误1. 对NULL指针的解引用操作2. 对动态开辟空间的越界访问3. 对非动态开辟内存使用free()4. 使用free释放一块动态开辟内存的一部分5. 对同一块动态内存多次释放6. 动态开辟内存忘记释放&#xff08;内存泄漏&#xff09; 二、几个经典笔试题…

rust容器、迭代器

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;点击跳转 目录 一&#xff0c;std容器 1&#xff0c;Vec&#xff08;向量、栈&#xff09; 2&#xff0c;VecDeque&#xff08;队列、双端队…

邦注科技 模具保护器 CCD电子眼 专业工业视觉检测设备

模具保护器是一种用于保护模具的设备&#xff0c;可以在塑料压铸和冲床等加工过程中起到保护模具的作用。以下是关于模具保护器在保护塑料压铸和冲床模具方面的应用&#xff1a; 塑料压铸模具保护器&#xff1a; 防止碰撞&#xff1a;在塑料压铸过程中&#xff0c;模具可能会…

MindSponge分子动力学模拟——安装与使用

技术背景 昇思MindSpore是由华为主导的一个&#xff0c;面向全场景构建最佳昇腾匹配、支持多处理器架构的开放AI框架。MindSpore不仅仅是软件层面的工具&#xff0c;更重要的是可以协同华为自研的昇腾Ascend平台&#xff0c;做到软硬件一体的行业解决方案。基于MindSpore的高通…

解析源代码安全的防泄密解决途径

随着各行各业业务数据信息化发展&#xff0c;各类产品研发及设计等行业&#xff0c;都有关乎自身发展的核心数据&#xff0c;包括业务数据、代码数据、机密文档、用户数据等敏感信息&#xff0c;这些信息数据有以下共性&#xff1a; 属于核心机密资料&#xff0c;万一泄密会对…

YOLOv9全网最新改进系列:YOLOv9完美融合标准化的注意力模块NAM,高效且轻量级的归一化注意力机制,助力目标检测再上新台阶!

YOLOv9全网最新改进系列&#xff1a;YOLOv9完美融合标准化的注意力模块NAM&#xff0c;高效且轻量级的归一化注意力机制&#xff0c;助力目标检测再上新台阶&#xff01;&#xff01;&#xff01; YOLOv9原文链接戳这里&#xff0c;原文全文翻译请关注B站Ai学术叫叫首er B站全…

[笔试训练](十六)

目录 046:字符串替换 047:神奇数 048:DNA序列 046:字符串替换 字符串替换_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 简单模拟题~ class StringFormat { public:string formatString(string str, int n, vector<char> arg, int m) {strin…