高德CanvasLayer加载图片

最新推荐文章于 2024-08-28 09:20:19 发布

陈熙之

最新推荐文章于 2024-08-28 09:20:19 发布

阅读量664

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/cmhdl521/article/details/128715778

版权

笔记专栏收录该内容

7 篇文章

订阅专栏

文章讲述了在处理高德地图API的Imagelayer时遇到的大尺寸图片导致内存消耗过大的问题，以及通过使用CanvasLayer和Canvas进行图片绘制以优化性能，实现流畅显示的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前使用高德Imagelayer来处理叠加图片

解决高德地图api叠加Imagelayer播放雷达图闪烁

接口给的图片尺寸很大，5700*4800，150k左右 ;这种方式会一直烧内存，32G的电脑有时候都觉得卡，换了客户机器不好的，就直接爆了。尝试了很多次，都没有好的解决办法。最后选择用CanvasLayer来处理。

var context = null
var canvaimg = null

//url 图片地址 是否isfirst第一次加载
CanvasLdImg(url,isfirst = false){
            let that = this
            if(isfirst == true){
                //创建canvas
                var canvas = document.createElement('canvas');
                canvas.width = 5717;
                canvas.height = 4837;
                context = canvas.getContext('2d')
                
                //创建图片
                canvaimg = new Image();
                //跨域 调用的接口是有其他IP的图片地址
                canvaimg.setAttribute("crossOrigin",'Anonymous')
                canvaimg.src = url;
                
                //onload方法，图片加载完毕，再调用drawImage
                canvaimg.onload = function() {
                    //清理
                    context.clearRect(0, 0, 5717, 4837) 
                    context.drawImage(canvaimg, 0, 0, 5717, 4837, 0, 0, 5717, 4837);
                };
                
                //创建CanvasLayer图层
                let CanvasLayer = new AMap.CanvasLayer({
                    canvas: canvas,
                    bounds: new AMap.Bounds(
                        [70,15],[140,54]
                    ),
                    zooms: [3, 18],
                    opacity: 0.7,
                    zIndex:100
                });
                this.img_layers_list.push(CanvasLayer)
                this.map.addLayer(CanvasLayer);
            }
            else{

                canvaimg = new Image();
                canvaimg.src = url
                canvaimg.setAttribute("crossOrigin",'Anonymous')
                if (canvaimg.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
                    context.clearRect(0, 0, 5717, 4837) //清理
                    context.drawImage(canvaimg, 0, 0, 5717, 4837, 0, 0, 5717, 4837);
                    return; // 直接返回，不用再处理onload事件  
                }
                canvaimg.onload = function() {
                    context.clearRect(0, 0, 5717, 4837) //清理
                    context.drawImage(canvaimg, 0, 0, 5717, 4837, 0, 0, 5717, 4837);
                };
            }
        }

的确丝滑多了。