前几天就写到了canvas绘制地图,但是在计算出地理范围之后,在请求对应图片和绘制的过程中,遇到了异步的问题。一直没解决,最后花了20块大洋才解决了。下面记录一下如何使用es6语法来解决异步。传统的回调方式解决的方法后续补上。
//开始绘制
let disTop=0;
function draw(i1,j1) {
return new Promise((resolve,reject) =>{
disTop=i1*256;
var img = new Image();
img.src = `https://c.tile.openstreetmap.org/${zoom}/${i1}/${j1}.png`;
img.οnlοad=function(){
console.log("绘制"+j1*256,disTop)
ctx.drawImage(img, disTop,j1*256);
resolve()
}
})
}
(async function () {
for(let i=0;i<=fixedTileLeftTopNumX;i++){
for(let j=0;j<=fixedTileLeftTopNumY;j++){
await draw(i,j)
}
}
})()