如何在自定义 ImageMapType 实现中拉伸某些缩放级别的磁贴

How to stretch tiles for certain zoom levels in custom ImageMapType implementation?

本文关键字：缩放 自定义 ImageMapType 实现      更新时间：2023-09-26

我已经实现了一个自定义的ImageMapType，它根据getTileUrl（）的给定坐标和缩放级别返回有效的磁贴URL。

new google.maps.ImageMapType({
    name: 'Satellite',
    getTileUrl: function(coord, zoom) {
        var p_type = "satellite",
            z = zoom - 11,
            corr = Math.pow(2, zoom) - Math.pow(2, z),
            p_x = coord.x - corr,
            p_y = coord.y - corr,
            maxCoord = Math.pow(2, (z+1)) - 1;
        if (p_x > maxCoord || p_y > maxCoord || p_x < 0 || p_y < 0) {
            return 'http://maps.gstatic.com/intl/en_us/mapfiles/transparent.png';
        }
        p_x = (p_x < 16 ? '0' : '') + p_x.toString(16);
        p_y = (p_y < 16 ? '0' : '') + p_y.toString(16);
        return 'http://map.example.com/' + p_type + '/' + (z + 1) + '/tile_' + p_y + p_x + '.jpg';
    },
    tileSize: new google.maps.Size(128, 128),
    isPng: false,
    minZoom: 11,
    maxZoom: 16
});

我有 128x128 磁贴，用于缩放级别 11 到 16。通过将 ImageMapTypeOptions 对象的 maxZoom 属性增加到 16 个以上，可以缩放到有图块的位置（当然不会出现磁贴，但标记和折线确实有效）。在这种情况下，我希望从上一个缩放层拉伸磁贴（与更改缩放级别时的过渡效果相同）。

可能吗？如果是这样，如何？

非常好的问题。从理论上讲，这应该是可以在客户端上完成的，但getTileUrl作为 google.maps.ImageMapType对象必须返回 URL，使用此对象时必须在服务器上执行此操作。

另一种可能性是改用更通用的google.maps.MapType对象并定义自己的getTile方法。然后，您可以返回自己的拉伸<img>元素。

相关文章：