習慣沉默123
2017-06-20 11:02
采纳率: 33.3%
浏览 1.3k

用canvas画地图,批量加载多张瓦片地图,第一次刷新不显示,之后刷新可以,求解!!!

function load(imgX,imgY){ 
    //移动超过一个256,加载多一个图片
    var xLength = imgX/256
    var yLength = imgY/256          

     var x_ze = long2tile(116.402544,zm)-2  //根据中心点算出中心点的行列号,画布左上角(原点)的行号 ;   
     var y_ze = lat2tile(39.913607,zm)-2    //画布左上角(原点)的列号

      for(var y=-Math.floor(yLength)+y_ze;y<6-yLength+y_ze;y++ ){       //原点的列号-移动距离(超过256像素多加载一张图片)
        for(var x=-Math.floor(xLength)+x_ze;x<6-xLength+x_ze;x++ ){         
        var x_ch = x.toString(16)      //转十六进制                
        var y_ch = y.toString(16)      //转十六进制

        var img=new Image()  
        img.src="/seismis/images/map/L0"+zm+"/R00000"+ y_ch+"/C00000"+ x_ch+".png";           

           if(img.complete){              
           drawBeauty(img,x*256-x_ze*256,y*256-y_ze*256);
           console.info("正常加载");
           }
        else{    
           img.onload = function(){
            console.info("图片未加载");
            drawBeauty(img,x*256-x_ze*256,y*256-y_ze*256);
           }
            img.onerror = function(){
              console.info("图片异常")
              drawBeauty(img,x*256-x_ze*256,y*256-y_ze*256);
           };
        }
    }
 }

}//load

  function drawBeauty(img,x,y){      
    ctx.drawImage(img,x+imgX-300,y+imgY-256,256,256); 

 }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳
     img.onload = function(){
                console.info("图片未加载");
                drawBeauty(img,x*256-x_ze*256,y*256-y_ze*256);
               }
                    改为
                    img.onload = function(){
                console.info("图片未加载");
                drawBeauty(this,x*256-x_ze*256,y*256-y_ze*256);////注意是this
               }
    

    要不第一次加载图片从服务器下载需要时间,而img已经是最后一个img了,都是绘制了最后的img。

    加载过后从缓存加载走的是if(img.complete)直接绘制当前图片

    点赞 评论

相关推荐 更多相似问题