9

请注意:

这个问题与我在 stackoverflow 上找到的这个问题非常相似。

谷歌地图 v3 ImageMapType 防止包装

但是,上述问题和答案不适用于我的示例/问题,因为我需要能够以任何缩放级别查看我的所有图像,更重要的是我需要绘图工具才能正常工作。


我的场景:

我有一个自定义的谷歌地图ImageMapType,它也有DrawingManager库和工具。

我的问题:

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

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

我的问题:

如何防止包装问题,以使所有标记都不会移动或重复,并且绘图工具可以在不捕捉到多边形的另一侧的情况下工作?


在线示例:

http://jsbin.com/ecujug/5/edit#javascript,live

问题视频:

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

期望的效果:

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

4

2 回答 2

13

您应该在更高的级别上工作,而不是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"
}; 

现场演示

于 2012-07-22T10:03:40.880 回答
3

似乎很明显 - 谷歌地图认为这是一个完整的地球,所以它是圆形的。为什么要在最小(地球范围)缩放级别上工作?让谷歌地图认为这只是一小块土地,不超过 1°,你就完成了。

于 2012-07-10T17:39:00.800 回答