インタラクティブマップの作成

Question

質問がありました。hereのような同じマップを作成するにはどうすればいいですか？

何を使用すればいいですか、それをズームしているときに表示されている要素を持つマップをどのように行うのですか？ また、画像も保存するためにデータベースを準備するにはどうすればよいですか？ ありがとうございます！

Answer 1

非常に一般的な質問ですが、簡単にお答えさせて頂きます。まず地図の概念を簡略化しましょう。

マップはブロックは多くの子ブロックで構成され、各子は4ブロックに分割されていると仮定します。以下を見てください：

ので、マップを作るために必要とされる画像の数は、この相関関係に基づいて算出された画像に乗の数に等しい：

ここで、「n」は地図のズームの度合いです。

ウェブ言語にアイデアを翻訳するためには、次の手順を取ることがあります。

1-ズームの度合いを確認します。 2ファイルをデータベーステーブルに保存し、親のIDと位置を示します。ここでは、データテーブルは、ズームの「1」程度のためにのように見えるべきかのサンプルです：クライアント側では、

3- アヤックスとHTMLキャンバスを採用し、はJavaScriptを使用してはユーザーのマウスの動きを追跡するイベントハンドラ

希望します。

Answer 2

このマップはgoogle maps apiで作成されているようです。他のjavascriptマッピングライブラリの例は、openlayers、leaflet、mapbox-glです。

これらのライブラリはすべて、ズームとパンをサポートしています。マップボックスとGoogleにはデータサービスがあり、地図にデータを配置することができます。独自のデータを持っている場合は、マッピングライブラリを使用するためにそれを何らかのフォーマットに変換する必要があります。これを行う方法の詳細は、データの種類、マップ使用のタイプ、選択したマッピングライブラリ、データのダイナミクスなどに非常に依存します。