谷歌地图 API v3 ImageMapType

Question

我在这里关注 Google Maps API v3 ImageMapType 示例：https://developers.google.com/maps/documentation/javascript/examples/maptype-image

但是，我没有从文档中清楚地了解磁贴/缩放的工作原理。现在，我只是想让它使用 0 缩放。一旦我解决了这个问题，我就可以弄清楚缩放部分。

我的图像是 2000 像素 X 2000 像素。我已将其以 250 像素 X 250 像素/图块分割成 8 个图块乘 8 个图块。

我正在 getTileUrl 上执行 console.log。我期待看到我的所有 64 个图块从 0-0.png 加载到 7-7.png 但是，我看到 0-0.png 尝试加载九次。

我创建了这个http://jsfiddle.net/2N2sy/1/（下面的代码）来模拟我的代码。

非常感谢您帮助解开瓷砖/缩放！

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

    return {
        x: x,
        y: y
    };
}

var map;

function initMaps() {

    $.getScript("http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js").done(function (script, textStatus) {

        var customMapTypeOptions = {
            getTileUrl: function (coord, zoom) {
                var normalizedCoord = getNormalizedCoord(coord, zoom);
                if (!normalizedCoord) {
                    return null;
                }
                var bound = Math.pow(2, zoom);
                console.log('http://img.photobucket.com/albums/v229/s15199d/ + normalizedCoord.x + '-' + (bound - normalizedCoord.y - 1) + '.png');
                return 'http://img.photobucket.com/albums/v229/s15199d/ + normalizedCoord.x + '-' + (bound - normalizedCoord.y - 1) + '.png';
            },
            tileSize: new google.maps.Size(250, 250),
            maxZoom: 0,
            minZoom: 0,
            radius: 1738000,
            name: 'custom map'
        };

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

        var latlng = new google.maps.LatLng(0, 0), // center point

        mapOptions = {
            zoom: 0,
            center: latlng,
            draggable: true,
            scrollwheel: false,
            mapTypeControl: false,
            panControl: false,
            scaleControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            streetViewControl: false,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },        
            mapTypeControlOptions: {
                mapTypeIds: ['custom map']
            }
        };

        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        map.mapTypes.set('custom map', customMapType);
        map.setMapTypeId('custom map');

    });
}

$(function () {
    if (window.google && google.maps) {
        //alert("Map script is already loaded. Initializing");
        initMaps();
    } else {
        //alert("Lazy loading Google map...");
        lazyLoadGoogleMap();
    }

});

function lazyLoadGoogleMap() {
    $.getScript("http://maps.google.com/maps/api/js?sensor=true&callback=initMaps")
    .done(function (script, textStatus) {
        //alert("Google map script loaded successfully");
    })
    .fail(function (jqxhr, settings, ex) {
        //alert("Could not load Google Map script: " + jqxhr);
    });
}

Answer 1

您是在告诉它这样做。如果您查看getNormalizedCoord 函数，您会发现您期望tileRange 为1。然后您检查x 坐标与tileRange。由于它是 1，所有大于或等于 1 的值都将被归一化（只有一个选项小于 1，并且为零）。

如果你遵循它的逻辑，它会这样做：

1. 将x 设置为1 % 1（即为0）
2. 将x 设置为0 + 1（即1）
3. 将x 设置为1 % 1（又是0）

因此，在您选择的缩放级别，该函数总是返回 0。如果您尝试更大的缩放级别，您会注意到它确实会加载您的其他图块。

您犯的一个错误（我认为）是您将缩放级别倒退：0 完全缩小，9 完全放大。您使用的示例基于单个概览图像进行缩放级别 0 和每一步进一步放大的更小的块。因此，您应该期望以缩放级别 0 加载一个图块 (0, 0)。要加载所有 64 个图块，您将需要更高的缩放级别。对同一个 url 的多次调用只是 API 使用其缓存来填充切片。如果你看一下这个例子，它只是在那里沿 X 轴重复相同的图像。

---

回顾 cmets 中讨论的内容，使用的标准化函数将加载所有图块的缩放级别为 3。现在，加载图块时 y 轴翻转。要解决此问题，您必须将 getTileUrl 中的以下行从 (bound - normalizedCoord.y - 1) 更改为 (normalizedCoord.y - 1)。

在 Google 地图中进行缩放的整个想法是基于为相同的平铺网格加载具有更高细节级别的图像，从而提供进一步放大的想法。为此，您需要生成额外的图像。

如果您没有/不需要具有额外细节的图像，您可以选择将缩放级别固定为 3（​​无论如何没人会注意到）并像这样部署或清理（甚至可能删除）规范化代码以满足您的需求。目前，该功能负责在 X 轴上重复相同的图像，而在 Y 轴上完全不重复。对于 X 轴上的重复，它会查看缩放级别以确定在再次环绕到 0 之前应该加载多少块。

从问题中，我无法推断您是需要包装还是只是从示例中选择了包装。我也无法判断您是否有更多图像。因此我不能给你任何现成的代码，因为我没有任何规范可以使用。

---

如果你不需要包装，让它像处理 Y 坐标一样处理 X 坐标：

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

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

    return {
        x: x,
        y: y
    };
}

（请注意，这两个 if 语句可以合并为一个，我只是想方便注意哪些更改会影响此行为）

Answer 2

您似乎遇到了缩放级别问题。通过将 customMapTypeOptions 对象中的 minZoom 和 maxZoom 分别更改为“0”和“2”，并将 mapOptions 对象中的起始缩放设置为“1”，应用程序将图像称为“0-1”、“0-0”、 1-1' 和 '1-0' 加载。

在调查了您列出的 Google 示例后，我注意到当您为他们的地图图块添加 URL 时，会在 url 中包含缩放级别。以下是缩放级别为 0 时调用的一个图块的示例：

http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/0/0/0.jpg

注意最后三个数字，“.../0/0/0.jpg”。在我放大到缩放级别 1 后，调用的前两个地图图块具有 url：

http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/1/0/1.jpg
http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/1/0/0.jpg

注意最后三个数字是如何变化的。我相信第一个数字是图像应显示的缩放级别，然后是地图图块网格中图像位置的 x 和 y。

根据示例代码中的注释：

// 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;

您将为缩放级别 0 使用单个图像文件（这就是为什么 0-0 是您加载的唯一图像的原因），为缩放级别 1 使用 2 个图像，为缩放级别 2 使用 4 个图像，依此类推。