Question

我们正尝试使用v.3的API在Google地图上叠加自定义图块。我们的工作基于Google https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes上的示例。

基本功能正在运行，我们的瓷砖正在出现，除了它们位置不正确，并且逐渐改变缩放级别会使它们更加错误定位。

例如，地图在缩放15处加载。根据图块显示的内容，将一个停靠点缩放到16级会导致地图不正确地重新定心。地图实际上是正确居中的（由我们的自定义标记指示），但是如果为新缩放绘制了适当的图块集，则在新缩放级别绘制的图块应该是地图中心的左下方。

造成这种情况的原因是什么？我们如何解决？

我们的瓷砖生成不良吗？我们需要指定地图边界吗？

我们的地图页面：http://www.cornell.edu/maps2/

我们稍微调整过的Google示例代码（如果我们使用Google示例中的“绑定”变量，则无法加载tile，因为它们的文件名不匹配）：

var customTypeOptions = {
getTileUrl: function(coord, zoom) {
    var normalizedCoord = getNormalizedCoord(coord, zoom);
    if (!normalizedCoord) {
        return null;
    }
    var bound = Math.pow(2, zoom);

    //var imageURL = "http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" + "/" + zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + ".jpg";

    var imageURL = "http://www.cornell.edu/maps/tiles/x" + (normalizedCoord.x + 1) + "y" + (normalizedCoord.y - 1) + "z" + zoom + ".gif";

    return imageURL;
 },
 tileSize: new google.maps.Size(256, 256),
 maxZoom: 18,
 minZoom: 13,
 name: "Custom"
 };

var customMapType = new google.maps.ImageMapType(customTypeOptions);

function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;

// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;

// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
    return null;
}

// repeat across x-axis
if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
}

//console.debug(coord.x, coord.y, tileRange, zoom, x, y);
return {
    x: x,
    y: y
};
 }

Answer 1

虽然目前还不清楚导致此问题的原因，但使用MapTiler重新生成我们的图块会导致地图按预期工作。我们的原始图块是由Photoshop JavaScript文件生成的，似乎很可能输入或计算的边界不正确，导致文件编号在引用时导致渐进错误。

地图图块错误地定位在自定义Google叠加层上

1 个答案: