9

ご注意ください：

この質問は、stackoverflow で見つけたものと非常によく似ています。

Google マップ v3 ImageMapType によるラッピングの防止

ただし、上記の質問と回答は私の例/問題では機能しませんでした。これは、すべての画像を任意のズーム レベルで表示できるようにする必要があり、さらに重要なことに、描画ツールが正しく機能する必要があるためです。

私のシナリオ:

を使用したカスタム Google マップ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

中央の GPS ポイントと同様LatLng(0,0)に、そのポイントを含むタイルは の中央タイルである必要があります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

非常に明白なようです - Google マップはこれが地球全体であると考えているため、丸みを帯びています。最小限の (地球規模の) ズーム レベルで作業するのはなぜですか? Google マップに、これが 1° 以上かからない小さな土地だと思わせれば完了です。

于 2012-07-10T17:39:00.800 に答える