Javascript 地面覆盖性能问题。我必须用瓷砖覆盖吗？

这是一个非常基本的问题，我希望有一些高层次的指导：

我允许用户上传任意图像，并在谷歌地图上拉伸（和旋转）它。实际上，这张图片在地理上不应该比几英亩大，但它可以（而且很可能）几mb

我将图像加载到画布上进行旋转，然后将其交给地面覆盖层以拉伸和定位图像，但对于较大的文件（比如1-2MB以上），每次调整后需要一段时间（2或3秒）才能显示。然后我将保存图像和方向，并加载和放置它，而无需调整挂钩。在这第二个页面上，我需要更有效地加载它，因为每次贴图移动或缩放都会导致它重新渲染，并且每次都要花费很长时间，除非我将图标大小的东西加载到覆盖中

我的问题是，在第二个页面上，基本上是只读的，我如何才能最好地优化该图像的显示？平铺覆盖设置是唯一的方法吗？在旋转后重新保存图像可能会对我有所帮助吗？瓷砖覆盖对我来说似乎很复杂，所以我希望有另一种方法可以加快速度。我感谢你的帮助

下面是我的overlayImage（）函数：

function overlayImage()
{
var c = document.getElementById("overlayCanvas");
c.width = c.width;
var ctx = c.getContext("2d");

if (imgoverlay!=null) {imgoverlay.setMap(null);imgoverlay=null;}
var img = new Image();
img.src = overlayurl;
img.onload = function() {

    var dist = google.maps.geometry.spherical.computeDistanceBetween(neBound.getPosition(), swBound.getPosition()); // distance between the pins

    var ratio = dist / Math.sqrt(Math.pow(img.width,2) + Math.pow(img.height,2)); //ratio between the map units and pixel units on the image

    var ang = google.maps.geometry.spherical.computeHeading(swBound.getPosition(), neBound.getPosition()); //heading from one pin to the other
    var imgangle = Math.atan(img.width/img.height)*180/Math.PI; //heading for zero rotation (aspect ratio of the image)
    degrees = ang-imgangle; // rotation we need to perform is the difference

    midpoint = nextGeo(swBound.getPosition(), dist/2, ang); //the midpoint of the two pins.

    var boundHeight = ratio * (img.width * Math.abs(Math.sin(degrees * Math.PI/180)) + img.height * Math.abs(Math.cos(degrees * Math.PI/180))); //x sin degrees + y cos degrees, all times ratio
    var boundWidth = ratio * (img.width * Math.abs(Math.cos(degrees * Math.PI/180)) + img.height * Math.abs(Math.sin(degrees * Math.PI/180)));

    var bounds = new google.maps.LatLngBounds(
        nextGeo(nextGeo(midpoint, boundHeight/2, 180), boundWidth/2, 270), 
        nextGeo(nextGeo(midpoint, boundHeight/2, 0), boundWidth/2, 90)
    );
    console.log(bounds);
    ctx.canvas.width = img.width * Math.abs(Math.cos(degrees * Math.PI/180)) + img.height * Math.abs(Math.sin(degrees * Math.PI/180));
    ctx.canvas.height = img.width * Math.abs(Math.sin(degrees * Math.PI/180)) + img.height * Math.abs(Math.cos(degrees * Math.PI/180));
    ctx.translate( c.width/2, c.height/2 );
    ctx.rotate( degrees*Math.PI/180);
    ctx.translate( -c.width/2, -c.height/2 );
    ctx.drawImage(img, (c.width-img.width)/2,(c.height - img.height)/2);
    console.log(img.width, img.height);
    console.log(c.width, c.height);
    imgoverlay = new google.maps.GroundOverlay(c.toDataURL("img/png"), bounds, {opacity: 1, clickable: false});
    imgoverlay.setMap(map);
};
}