0

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

基本功能正常工作，我们的图块出现了，只是它们位置有点不对，并且逐渐更改缩放级别会使它们的位置更加错误。

例如，地图以 15 级缩放加载。根据图块显示的内容，将一站放大到 16 级会导致地图重新居中不正确。地图实际上是正确居中的（如我们的自定义标记所示），但如果为新缩放绘制了正确的瓷砖集，则在新缩放级别绘制的瓷砖应该位于地图中心的下方和左侧。

是什么原因造成的，我们该如何解决？

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

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

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

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
};
 }
4

1 回答 1

0

虽然仍然不清楚是什么导致了这个问题，但使用 MapTiler 重新生成我们的瓦片会产生一个按预期工作的地图。我们的原始图块是由 Photoshop JavaScript 文件生成的，似乎很可能是边界输入或计算不正确，导致文件编号导致引用它们时出现渐进式错误。

于 2012-07-05T14:34:53.097 回答