Question

这是一个非常基本的问题，我很欣赏一些高级方向：

我允许用户上传任意图片，并在谷歌地图上拉伸（并旋转）它。实际上，这张图片的地理位置应该不比几英亩大，但它可以（也可能是）几英寸。

我正在将图像加载到画布上进行旋转，然后将其放到地面叠加层以拉伸和定位图像，但对于较大的文件（例如1-2 mb plus），需要一段时间（每次调整后显示2或3秒）。然后我保存图像和方向，并加载和放置它没有调整钩子。在第二页上，我需要它来更有效地加载，因为每个地图移动或缩放都会导致它重新渲染，并且每次都基本上永远占用，除非我将一个图标大小的东西加载到叠加层中。 / p>

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

这是我的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);
};
}

地面覆盖性能问题。我必须平铺叠加层吗？

0 个答案: