web-dev-qa-db-ja.com

単一の大きな画像オーバーレイをGoogleマップのタイルに変換します

Google Maps v3APIを使用したオーバーレイに使用している大きな高解像度の画像があります。これは、適切なネットワーク接続を備えたデスクトップおよびラップトップコンピューターでは正常に機能しますが、当然のことながら、モバイルユーザーではあまり機能しません。

APIを介してGoogleマップのタイルサーバーとして機能できるように、さまざまなズームレベルで画像を2Dタイルに分割するための最良/最も簡単な方法は何ですか？

タイルを確実に生成し、結果の各タイルに必要なズームと座標を提供したり、ズームと座標を提供した場合に正しいタイルを提供したりするプログラムはありますか？

適切な情報を収集したら、その場でそれを行うためのタイルサーバーを作成するのは非常に簡単ですか？おそらく、モデルとして使用できるソースコードがそこにありますか？ （私は http://blog.gmapify.fr/a-map-tile-server-part-2-understanding-google-maps-tile-overlays-and-building-up-aでタイルサーバーを見つけました-tile-server これは確かに役立ちますが、ソースイメージからタイルを提供しないため、少なくともその部分を把握する必要があります...）

それとも、もっと簡単な場合は手動で従うことができる段階的なアルゴリズムがありますか？ （これは1つの画像であり、マップ上の1平方マイルの領域をカバーしているため、手動で行うことは、好ましくない場合でも実行可能です。）

google-mapsgoogle-maps-api-3tile
14
Trott

mapTiler http://code.google.com/p/maptiler/ を確認できます。必要なタイルを生成できます。

タイルサーバーは本当に簡単に書くことができます。最も簡単な方法は、ディレクトリ構造で静的ファイル（タイル）をホストすることです。その場合、ディレクトリ構造は通常servername/zoom/x/y.png（またはzoom/y/x.png）になります。このような構造は、MapTilerによっても生成されます。 MapTilerは、タイルを使用してサンプルWebページも生成します（ただし、Google Maps API v2を使用していると思います）。

Google Maps API v3でのタイルの使用に関する情報は、次の場所にあります。 http://code.google.com/apis/maps/documentation/javascript/maptypes.html#CustomMapTypese

13
Tomik

タイルを事前にカットしなくても、クライアントサイドですべてを行うことができます

https://github.com/Murtnowski/GMap-JSlicer を参照してください

slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();

とてもシンプルです。

5
Murtnowski

Maptilerを使用してマップを作成するための非常に優れたビデオチュートリアルがあります。これは次の場所にあります。
ひどくないモバイルマップ

モバイルマップに焦点を当てていますが、maptilerやその他の基本もカバーしています。とても役に立ちました。

2
Tad