谷歌地图API V3-防止ImageMapType包装

Google Maps API V3 - Prevent ImageMapType from wrapping

本文关键字：ImageMapType 包装 防止 V3- API 谷歌地图      更新时间：2023-09-26

请注意：

这个问题和我在stackoverflow上发现的这个问题非常相似。

Google Maps v3 ImageMapType阻止包装

然而，上面的问题和答案不适用于我的示例/问题，因为我需要能够在任何缩放级别查看我的所有图像，更重要的是，我需要绘图工具才能正确工作。

我的场景：

我有一个使用ImageMapType的自定义谷歌地图，它还有DrawingManager库和工具。

我的问题：

乍一看，一切都很好，但如果你要绘制任何标记或多边形，然后平移地图，标记/多边形会在视图中的地图区域重复或移动。

在地图上绘制大型多边形时也会出现同样的问题，在绘制多边形时，您会注意到所绘制的线会突然捕捉到多边形的错误一侧。

我的问题：

如何防止包裹问题，使所有标记不会移动或重复，并使绘图工具在不捕捉到多边形另一侧的情况下工作？

在线示例：

http://jsbin.com/ecujug/5/edit#javascript，实时

问题视频：

https://dl.dropbox.com/u/14037764/Development/stackoverflow/map-drawing/issue.html

期望效果：

http://www.maplib.net/map.php?id=1236

不应使用1-3缩放级别，而应使用更高级别，并为图像选择(0,0)平铺之外的其他原点。您所需要的只是简单的数学。默认情况下，您的地图将以LatLng(0,0)点为中心（正如您在MapOptions中所提到的），计算将围绕该点执行。

理论

在任何缩放下，总共有2^zoom x 2^zoom瓦片：

                           zoom
  _______________________ 2
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|          
  |_|_|_|_|_|_|_|_|_|_|_|          
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|          
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_| 
  zoom
 2

由于LatLng(0,0)是中心GPS点，因此包含该点的瓦片应该是tile-sheet:的中心瓦片

                           zoom
  _______________________ 2
  |                     |
  |                     |
  |                     |           zoom
  |                     |          2         zoom-1
  |          o----------|-------*  ------ = 2
  |          |_|        |            2
  |          |          |
  |          |          |
  |          |          |
  |__________|__________| 
  zoom       |
 2           |  zoom-1
             * 2

因此，在任何zoom级别上，中心瓦片都具有(2^(zoom-1), 2^(zoom-1))坐标。该瓦片将是映射的origin。通过从当前瓦片的坐标中减去原点坐标，我们将获得coordinate-space，就像我们在1-3缩放级别中工作时以及原点为(0,0)瓦片时一样。

实施

首先，选择更高的缩放级别，例如：

var MIN_ZOOM = 11,
    MAX_ZOOM = 13;

映射将由getNormalizedCoord功能完成：

function getNormalizedCoord(coord, zoom) {
    //Amount of total tiles:
    // MIN_ZOOM    ->     1 tile
    // MIN_ZOOM+1  ->     2 tiles
    // MIN_ZOOM+2  ->     4 tiles
    var totalTiles = 1 << (zoom - MIN_ZOOM),
        y = coord.y,
        x = coord.x;
    var originx = 1 << (zoom-1),
        originy = 1 << (zoom-1);
    if(y < originx || y >= originx + totalTiles ||
        x < originx || x >= originx + totalTiles){
        return null;
    }
    x -= originx;
    y -= originy;
    return { x:x, y:y };
 }

最后，ImageMapOptions应该是：

var siteMapOptions = {
    getTileUrl: function (coord, zoom) {
         var normalizedCoord = getNormalizedCoord(coord, zoom);
         if (normalizedCoord) {
             return 'https://edocstorage.blob.core.windows.net/siteimages/2fa9fc72-23a7-41ed-86a1-b83a3ba04790/_siteTiles/tile_' + 
                    (zoom-MIN_ZOOM) + '_' + 
                    normalizedCoord.x + '-' + 
                    normalizedCoord.y + '.png';
         } else {
             return 'content/tilecutter/empty.jpg';
         }
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: MAX_ZOOM,
    minZoom: MIN_ZOOM,
    radius: 1738000,
    name: "Site Plan"
};

现场演示

看起来很明显——谷歌地图认为这是一个完整的地球，所以它是圆形的。为什么要使用最小（地球范围）缩放级别？让谷歌地图认为这只是一小块不超过1°的土地，你就完了。

相关文章：