無限スクロールできる地図アプリケーションを自作したい

Question

###javascriptによる無限スクロール機能の自作
javascriptで無限スクロール機能を持つ地図アプリケーションを自作したいです。
地図画像は自作したもので、地球上のMAPではありません。
平面のスクロールで実現したいのですが、
適切な手段をご存知でしたらご教示いただきたいです。

実現したいこと

• 平面の無限スクロールMapを自作したい
• Map上にピンを刺したい

知りたいポイント

• 適切なライブラリが存在するか
• 適切なデザインパターンが存在するか
• SVGでやるべきか、canvasでやるべきか、WebGLでやるべきか

現時点での考え

• まず、Map画像自体を同一サイズの長方形の組み合わせに分割する
• 要素全体をdraggableに設定し、ドラッグした後の要素の座標が一定の範囲を超えた場合、外部の領域を継ぎ足すように画像をajaxで読み込む。
• その際、画面外の領域に消えた地図画像をメモリから開放する。

ふんわりした質問で大変申し訳ありませんが、何卒宜しくお願い致します。
※要はGoogleMapを自作したいのです…。

追記

以下の仕様を想定しております。

• 東西は無限スクロール
• 南北は無限スクロールは行わない

Comments

[Lhankor_Mhy]

leaflet.jsでいいじゃん、と思うのですが、あくまで「自作」にこだわるということでよろしいですか？

[Spinach]

ありがとうございます。leaflet.jsを存じてませんでした。これで良さそうですね。。。。活用させて頂きます。

Answer 1

解決済ですが、独自地図の実装であれば Google Maps API はもちろん、OpenLayers Leaflet などでも使用されている「地図タイル」を使用するのが手早いです。

Google Maps は（今はWebGLで描画していたような気がしますが）タイル画像を並べて表示することで地図を表現しています。

【タイル オーバーレイ | Google Maps Android API | Google Developers】
https://developers.google.com/maps/documentation/android-api/tileoverlay

このように独自タイルを表示する仕組みがあるので、それを利用するのはいかがでしょう。OpenLayers や Leaflet などはオープンソースなのでAPIキーの登録など煩雑な手順も無いのでお勧めです。

---

ご自分で作成されるなら、下記のようなスクリプト（MIT License）の処理を参考にすると手早いと思います。デモページはリンク切れしていますが、GitHubにコードがあります。

【[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll | コリス】
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-eco-scroll.html

【GitHub - Juntamng/eco-Scroll: Eco-friendly jQuery Scroll Plugin】
https://github.com/Juntamng/eco-Scroll

---

以下タイル画像の作成の参考になりそうなリソースURL。大きな画像からタイルを分割するツールなどもありますが、割愛します。

【Bing Maps Tile System】
https://msdn.microsoft.com/en-us/library/bb259689.aspx

【YOLP(地図):タイル画像仕様 - Yahoo!デベロッパーネットワーク】
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/cassette/tile.html

【Documentation - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/reference.html#tilelayer

【地理院地図｜地理院タイル仕様】
http://maps.gsi.go.jp/development/siyou.html

【地図タイルについて - smellman's Broken Diary】
http://smellman.hatenablog.com/entry/2015/12/26/054520

Comments

[Spinach]

たくさん情報をいただきありがとうございます。
大変ありがたいです。
タイルを作成してから張り足すイメージですね…。
参考にさせていただきます。

Answer 2

地図の特性をどう利用するかです。
北に突き抜けると南から出てくるのか
極点をこえると画面上にむかっていたのが画面下にむかうのか
仕様を考えなくてはなりません。

また、球体の地図をメルカトル的に処理すると、緯度の高いところでは
横方向の動きが高速にならないとおかしいです。

Comments

[Spinach]

ありがとうございます。
おっしゃるとおりですね。
GoogleMapのような動きを理想としていますので、
以下の仕様で検討することにします。（後付ですみません）
- 東西は無限スクロール
- 南北は無限スクロールは行わない

質問に追記をさせて頂きます。

[yambejp]

そうなると、円筒状の星を想定すればよいでしょう。
北や南の極点近くはいわゆる「世界のおわり」という仕様です
左右方向には突き当たったら逆からでてくるか
スクロールで先読みするかのどちらかが妥当です

[Spinach]

ありがとうございます。
考えがまとまりました。