スリップマップはどのように機能しますか？

Question

スリッピーマップは、ユーザーが2次元の平面をつかんでドラッグすることでパンできるWebウィジェットです。このコントロールはGoogleマップで人気があり、今日の多くの最新のマッピングシステムで見ることができます。それらがロードされるのを見ると、実際にはユーザーがパンするときに必要に応じてロードされる画像のグリッドであることがわかります。私の質問はそれらの画像は、HTML / JS / CSSでどのように整列、移動、および動的にロードされますか？彼らは背景画像付きのdivですか？ overflow：hiddenで親divにロードされていますか？ユーザーが動き回るときにメモリがリークしないようにするために、どのような戦略を使用しますか。ビルドを簡単にするサードパーティのライブラリはありますか？私は地理的な地図の表現には興味がなく、それらを表示するために一般的に使用されるインターフェイスだけに興味があります。ありがとう！

Answer 1

通常、画像要素のグリッドは移動され、一部がビューアーの端から外れて非表示になると、グリッドの反対側に移動し、src属性が新しいマップタイルを指すように変更されます。

これらすべては、あなたが言うように、overflow：hidden;で親要素にロードされます。

例として、オープンソースのオープンレイヤーの実装を見ることができます：

http://openlayers.org/