2

JavaScript でタイルを使用した単純なマルチレイヤー ズーム マップを作成しようとしています (Google マップに似ています --- ズームインすると詳細が表示されます)。架空の宝の地図を作成しているので、Google Maps API を使用したくありません。

ズーム レベルは 2 つだけ必要です --- ズーム アウトとズーム インです。500 ピクセル x 500 ピクセルのタイルを作成しました。縮小表示では 1 つのタイルのみが使用され、拡大表示では 4 つのタイルが使用されます。タイルの表示可能領域は、75 x 75 ピクセル (ウィンドウ) です。どちらのビューでも、ユーザーはパンできます。

以下は両方のビューです。

拡大表示

縮小表示

始めるのに苦労しています。これを HTML / CSS / JavaScript で実現したいと考えています。Polymaps ( http://polymaps.org ) と呼ばれるものを見つけました。これは、私が望むものを提供しているように見えますが、多くの追加機能を備えています。カスタム タイルを使用したマップの作成に関するチュートリアルはありません。これはJavaScriptで簡単に行うことができますか? 何を使用するかについての推奨事項はありますか?

4

3 に答える 3

1

SVGPanライブラリを試してください:

SVGPanライブラリの機能:

  • パン(Googleマップのパン)(白い背景をクリックしてパン)

  • ズーム(マウスホイールを使用)

  • 要素のドラッグ(描画要素をクリックして別の場所にドラッグします)

  • ドラッグ中のズームのような上記の組み合わせ

デモ

于 2013-01-05T04:51:13.887 に答える