Canvas转图片解决占用前端内存问题

背景介绍

公司一个项目是按省份加载数据(百度地图覆盖物–专业术语：电子围栏)，一个省份是一章Canvas图(可修改、编辑)，全国状态下加载全部数据图因为全国数据量太大(几万数据)，前端拿到数据后生成Canvas放在前端项目太浪费资源造成系统特卡。

解决办法

1. 接收后台数据生成Canvas并且Canvas隐藏(隐藏是为了消除切换图片的过程，优化用户体验)
2. 将Canvas转成图片(Canvas.toDataURL(‘image/png’)–转成图片的方法)
3. 将Canvas删除 (删除是为了减少项目内存、降低浏览器压力)
4. 将图片当做覆盖物载入地图(需要注意要完美重合)

5. // 上代码以供参考
   loadWP (time) { // time是生成canvas需要的时间
       // 西南、东北角 (固定位置，完美重合)
       const SW = this.map.getBounds().getSouthWest();
       const NE = this.map.getBounds().getNorthEast();
       // 覆盖物参数
       const groundOverlayOptions = {
           opacity: 1,
           displayOnMinLevel: 4,
           displayOnMaxLevel: 8
       };
       // 初始化GroundOverlay
       const groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
       // 设置覆盖物层级
       this.map.getPanes().labelPane.style.zIndex = '399';
       setTimeout(() => {
           // 获取canvas节点
           // const can = document.getElementsByTagName('canvas')[0];
           // 隐藏canvas
           this._var.mapvLayer.hide();
           // canvas转换成img.png并设置覆盖物
           groundOverlay.setImageURL(this._var.mapvLayer.canvasLayer.canvas.toDataURL('image/png'));
           this.map.addOverlay(groundOverlay);
           // 清除缓存数据
           this._var.mapvLayer.dataSet._data.length = 0;
           // 缓存覆盖物
           this._var.mapvLayer = groundOverlay;
       }, time);
   }