性能优化：canvas在leaflet地图上绘制动画占用内存过高

最新推荐文章于 2024-05-08 19:57:02 发布
最新推荐文章于 2024-05-08 19:57:02 发布
阅读量486 收藏 1
点赞数
文章标签： 前端 javascript canva可画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ningmeng_CSDN/article/details/132566595
版权

需要描述：

       使用leaflet加载离线或者在线地图，在图层上绘制渐变可控制半径的圆，以及绘制一束扇形波束，一直旋转

初实现：

      1、获取canvas元素

           

     2、绘制扇形波束

        此方式绘制扇形波束，实时会生成扇形的图片，一直在重新绘制，所以导致内存一直在增加，运行时间越长，对于内存的消耗的会越大，尝试使用离屏canvas来解决此问题，但优化效果不显著。

3、优化方案：将扇形波束旋转一周的所有的扇形都缓存下来，之后在旋转的过程中就不需要实时去绘制扇形，而是使用之前保存下来的图进行旋转，这样就仅仅是在第一圈的时候消耗内存，之后就不需要大量占用内存，至此内存占用问题得到优化

      具体代码如下：

   

 

 

    

    

ningmeng_CSDN
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
leaflet，canvas渲染目标，可加载大批量数据
csl125的博客
06-20 234
Leaflet-CanvasMarker: 在Canvas上绘制Marker,而不是每个marker插件一个dom节点,极大地提高了渲染效率。主要代码参考自 https://github.com/eJuke/Leaflet.Canvas-Markers，不过此插件有些Bug，github国内不方便，作者也不维护了，所以在gitee上新建一个仓库进行维护。修改版本v1.0,可以自定义画marker，使用canvas画marrker再添加到canvas上。修改的canvas渲染marker。
Leaflet.canvasdraw:在 2d 画布层上绘图（用于栅格）
06-20
Leaflet.canvasdraw 在 2d 画布层上绘图（用于栅格）
在Leaflet中点对象使用SVG和Canvas两种模式的对比
最新发布
夜郎King的博客
05-08 2534
本文首先阐述Leaflet中SVG和Canvas两种模式的原理和Leaflet的相关架构，然后通过实例对比marker的不同规模生成对机器的资源占用，最后使用基于Canvas的技术实现了5W-10W级的点数据展示。
html5 内存优化,提高HTML5 Canvas性能的技巧
weixin_39807859的博客
06-03 249
canvas代码也是有一些优化技巧的，我之前的几篇canvas的文章单纯涉及如何做使用canvas，下面看看别人是怎么说优化canvas性能的。一：使用缓存技术实现预绘制，减少重复绘制Canvs内容很多时候我们在Canvas上绘制与更新，总是会保留一些不变的内容，对于这些内容应该预先绘制缓存，而不是每次刷新。直接绘制代码如下：context.font="24px Arial";context.fi...
LeaFlet如何和canvas结合进行绘图
weixin_30408739的博客
09-08 1254
前言：canvas是一个非常好的东西，但是这个东西如何与leaflet进行结合，翻了一遍LeaFlet的API没有发现如何用canvas和LeaFlet相结合，难道两者无法集合天无绝人之路，最终我还是找到了DivIcon相结合，能达到目的。也可以利用DivIcon做一些简单的动画，当然也可以同样结合canvas进行绘图动画，下面就看一下如何结合： 效果图： 一、声明DIVIcon...
开源地图组件leafletwx功能更新：缓解canvas元素(如polygon)拖动、变更时频繁闪动的问题
whbke的博客
09-14 324
开源地图组件leafletwx功能更新：缓解canvas元素(如polygon)拖动、变更时频繁闪动的问题
leaflet 加载canvas
qq_26990355的博客
01-14 1565
//声明图层组 this.hisRescueLayer = L.layerGroup().addTo(this.map); this.showHisRescueLayer(); showHisRescueLayer(){ this.hisRescueLayer.clearLayers(); var myIcon = L.divIcon({ html: '&...
微信小程序：实现canvas绘制地图及简单拖动
03-17
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上进行图形绘制，从而实现各种复杂的交互效果。本篇文章将聚焦于如何利用Canvas在微信小程序中绘制地图，并实现简单的拖动功能。以下是对这个主题的...
leaflet-canvas:在 Leaflet 渲染到画布之前加载的脚本
06-10
总的来说，`leaflet-canvas` 是为了提升 Leaflet 地图性能而设计的，尤其适用于需要处理大量动态数据的场景。它结合了 JavaScript 和 HTML5 Canvas 的强大功能，使地图渲染更加流畅且资源友好。通过正确集成和使用这...
69.（leaflet篇）leaflet大量上图（10万个点）（canvas技术）.zip
02-11
然而，当需要在地图上显示大量标记或点时，传统的SVG或图像标记方式可能会导致性能瓶颈，因为每个标记都是独立的DOM元素，过多的元素会拖慢页面的渲染速度。 这就是Canvas发挥作用的地方。Canvas是一个画布元素，...
Map:canvas绘制地图
06-16
在JavaScript的世界里，Canvas是一个强大的绘图工具，它允许开发者通过编程的方式在网页上动态创建图形，包括绘制地图。"Map:canvas绘制地图"这个主题就是关于如何利用HTML5的Canvas API来实现自定义的地图绘制功能...
leaflet-maskcanvas
05-18
<<<<<<< HEAD＃传单MaskCanvas 用于显示大覆盖范围数据集的传单画布层。 特点： 基于画布图块层 由于内部使用了 ，因此即使对于大型数据集也具有 自定义颜色和圆圈大小 演示版 在查看演示。 ＃＃用法 设置 添加MaskCanvas和Quadtree库。 < script src =" QuadTree.js " > </ script > < script src =" L.TileLayer.MaskCanvas.js " > </ script > 您还可以使用程序包管理器通过bower install leaflet.maskcanvas安装程序包。 初始化maskCanvas层 L . TileLayer . maskCanvas ( ) ; 设置图层的数据集。 layer . setData ( data ) ; 最后将图层添加到地图。
leaflet-markers-canvas:一个 Leaflet 插件，用于在画布而不是 DOM 中渲染许多标记
05-30
传单标记画布 一个 Leaflet 插件，用于在画布而不是 DOM 中呈现许多标记。 这是 Eugene Voynov 对的完全重写。 感谢您的启发。 演示 这是 10000 个标记的，显示在一个画布中。 用法 依赖关系 和必须在全球范围内可用或作为对等依赖项安装。 安装 从 npm 安装： npm i leaflet-markers-canvas 或下载 例子 var map = L . map ( "map" ) . setView ( [ 59.9578 , 30.2987 ] , 10 ) ; var tiles = L . tileLayer ( "http://{s}.tile.osm.org/{z}/{x}/{y}.png" , { attribution : '© <a>OpenStreet
JS 基于 leaflet的风场
12-07
JS 基于 leaflet的风场，包括Demo以及关的测试，地图是基于高德地图
leaflet前端地图框架
03-05
封装leaflet地图前端框架，方便实用，有测量，坐标转换，图形绘制和编辑，缓冲区分析等功能
71.（leaflet之家）leaflet流入迁徙图（canvas技术）
GIS之家家长
05-26 130
听老人家说：多看美女会长寿 leaflet之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <ti
leaflet流出迁徙图（canvas技术）（leaflet篇.70）
地图之家
02-17 907
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title&g
html canvas 遮罩,「Leaflet」使用 Canvas 遮罩优化过量的 HTML Marker
weixin_32306683的博客
06-02 571
场景我曾在实际的项目中遇到过这样的情况，一片区域内有 2000 多个 polygon 区块，每个区块的中心都要显示区块的信息文本，信息文本是自定义的 marker：L.marker(item.pos, {icon: L.divIcon({html: `${item.text}`,className: ""})});这也就意味着可视范围内总会出现“许多区块与许多 HTML 文本元素”，每次对地图的拖...
69.（leaflet之家）leaflet大量上图（10万个点）（canvas技术）
地图之家
03-15 347
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title&g
[HTML5资料]Canvas教程，通过脚本（通常是JavaScript）绘图的HTML元素
02-20
javascript [HTML5资料]Canvas教程，通过脚本（通常是JavaScript）绘图的HTML元素

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值