Clever Geek Handbook

あなたをタイルにカットします。 パート1

画像 データをカードにロードする技術で状況を修正しようとするすべての試みにもかかわらず、人々は昔ながらの方法で作業を続け、マップのわずかな動きですべてのビューポートデータをロードするか、単にすべてのデータをロードします。

方向メーターがマーカーを写真にラスタライズし、スーパーグループ化およびクラスタリングシステムを構築し、スクリプトで余分なキロバイトごとに震えている限り、私の人生、ユーザー、カード、およびサーバーをもう少し美しくする最も簡単で、最も安定した、そしてありふれた方法を教えてください。

少し後で説明するように、カードの征服は5つのステップで構成されています。

1つ目はマップの読み込みです（すべてが見た目ほど単純ではありません）が、2つ目はこれらのデータカードへの読み込みです。

彼は私たちにとって興味深いです。



現在、このマーカーを地図に読み込むには2つの一般的な方法があります。

1.すべてのデータをajax経由で読み込むか、すぐにJavaScriptを読み込みます

2.「現在のビューポートにはどのオブジェクトがありますか？」という件名のサーバーをプルします。

最初のオプションには、特にマーカーが少ない場合に生命に対する権利があり、マーカーマネージャーはここで支援します（目に見えないマーカーを非表示にします）。



だから、我々は考慮します

座標ボックスデータをロードする関数があること

$.get( "ajax/load-map-data?SE=" +MySECorner.toString()+ "&NE=" +MyNECorner.toString()+ "&zoom=" +currentZoom, function (data){ //wow! i got the data for map! //for whole visible viewport( and just for it) }); * This source code was highlighted with Source Code Highlighter .



  1. $.get( "ajax/load-map-data?SE=" +MySECorner.toString()+ "&NE=" +MyNECorner.toString()+ "&zoom=" +currentZoom, function (data){ //wow! i got the data for map! //for whole visible viewport( and just for it) }); * This source code was highlighted with Source Code Highlighter .



  2. $.get( "ajax/load-map-data?SE=" +MySECorner.toString()+ "&NE=" +MyNECorner.toString()+ "&zoom=" +currentZoom, function (data){ //wow! i got the data for map! //for whole visible viewport( and just for it) }); * This source code was highlighted with Source Code Highlighter .



  3. $.get( "ajax/load-map-data?SE=" +MySECorner.toString()+ "&NE=" +MyNECorner.toString()+ "&zoom=" +currentZoom, function (data){ //wow! i got the data for map! //for whole visible viewport( and just for it) }); * This source code was highlighted with Source Code Highlighter .



  4. $.get( "ajax/load-map-data?SE=" +MySECorner.toString()+ "&NE=" +MyNECorner.toString()+ "&zoom=" +currentZoom, function (data){ //wow! i got the data for map! //for whole visible viewport( and just for it) }); * This source code was highlighted with Source Code Highlighter .



  5. $.get( "ajax/load-map-data?SE=" +MySECorner.toString()+ "&NE=" +MyNECorner.toString()+ "&zoom=" +currentZoom, function (data){ //wow! i got the data for map! //for whole visible viewport( and just for it) }); * This source code was highlighted with Source Code Highlighter .



$.get( "ajax/load-map-data?SE=" +MySECorner.toString()+ "&NE=" +MyNECorner.toString()+ "&zoom=" +currentZoom, function (data){ //wow! i got the data for map! //for whole visible viewport( and just for it) }); * This source code was highlighted with Source Code Highlighter .





これを使用して、キャッシングが不可能な状態でサーバーを強制終了し 、ユーザーをわずかなカードシフト（fi 4 アラウンドミー回数）で遅延させます。



このクソグーグルはどのように速く動作しますか？



彼は自分のカードの写真を小さな断片、256x256ピクセルでアップロードしているようです。



％username％と思いますが、同じことをしませんか？



この方法でデータをロードした場合：





個人的に、私は変態のカテゴリーに属し、そのようなトリッキーなリクエストの実装、およびマーカーマネージャーとクラスタリングは約6,000行かかります。

これからの記事で議論することであなたを苦しめることはありません。



教えます

シンプルにする方法



実装はGoogleマップv3用に提示され、数秒でYandexカード用にやり直すことができます（Googleでタイルを取得してYandexマップに表示するか、最初にYandex ITileで説明されたインターフェースを実装してカバーを使用します）、または少しファイルを操作した後、Googleの下でマップv2

いずれにせよ、APIカードと他のすべてとの関連付けを解除できる素晴らしいSparseTileLayerがあります（マップの開発時にv3にユーザーオプションがなかったため、現在使用しています）



それでは、マップタイプを作成しましょう





  1. 関数 ServerFetchMapType（）{
  2. }
  4. ServerFetchMapType.prototype.tileSize = new google.maps.Size（256,256）;
  5. ServerFetchMapType.prototype.maxZoom = 32;
  6. ServerFetchMapType.prototype.name = "サーバータイル#s" ;
  7. ServerFetchMapType.prototype.alt = "サーバーデータタイルマップタイプ" ;
  10. ServerFetchMapType.prototype.getTile = function （coord、zoom、ownerDocument）{
  11. var addr = this .getAddr（coord、zoom）;
  12. //テスト-すでにこのブロックをロードできますか？
  13. if （ServerFetchedTiles [addr]）{
  14. 帰る
  15. }
  17. $ .get（ "ajax / load-map-tile？" + addr、
  18. 関数 （データ）{
  19. ServerFetchedTiles [addr] = data;
  20. //すごい！ このタイルのデータを取得しました
  21. }）;
  23. };
  26. //そして、このタイルオーバーレイを現在のマップタイプに追加します
  27. map.overlayMapTypes.insertAt（0、 新しい ServerFetchMapType（））;
*このソースコードは、 ソースコードハイライターで強調表示されました。


変ではありません- それがすべてです :)

サーバーへのリクエストを実行する写真の代わりに、このタイプのカードを作成しました。

また、2つのオプションがあります。Googleは、x、y、zでタイルをアドレス指定する場合と、バウンスボックスでタイルを指定する場合のように、

これらのメソッドの実装：





  1. //タイルをタイル（x、y、z）としてリクエストできます
  2. ServerFetchMapType.prototype.getAddrXY = function （coord、zoom）{
  3. return "x =" + coord.x + "＆y =" + coor.y + "＆z =" + zoom;
  4. }
  6. //またはlatlngボックスとして
  7. ServerFetchMapType.prototype.getAddrLatLng = function （coord、zoom）{
  9. //メルカトル図法のヘルパー関数
  10. var mercator = function （point）{
  11. //
  12. var numtiles = Math.pow（2、point.zoom）;
  13. var bitmapsize = numtiles * 256;
  14. var bitmaporigo = bitmapsize / 2;
  15. var pixelsperlondegree = bitmapsize / 360;
  16. var pixelperlonradian = bitmapsize /（2 * Math.PI）;
  18. var lat = bitmaporigo +（pixelsperlondegree * point.x）;
  19. var ged2rad =（（point.t * Math.PI）/180.0）;
  20. var sn = Math.sin（deg2rad）;
  21. var lng =（（bitmaporigo-0.5 * log（（1 + sn）/（1-sn））* pixelsperlonradian））;
  22. return new google.maps.LatLng（lat、lng）;
  23. }
  24. var point1 = {x：coord.x * 256、y：coord.y * 256、z：ズーム};
  25. var point2 = {x：（coord.x + 1）* 256、y：（coord.y + 1）* 256、z：ズーム};
  26. var ne =メルカトル（point1）;
  27. var sw = mercator（point2）;
  28. return "NE =" + ne.toString（）+ "＆SW =" + sw.toString（）+ "＆z =" + zoom;
  29. }
*このソースコードは、 ソースコードハイライターで強調表示されました。


*この場合、メルカトルの機能をあまりうまく実装していません。組み込みコンバーター（yandex.converter）およびプロジェクター（overlay.projection）APIカードを使用する方がはるかに優れています。



残っているもの



ダウンロードしたタイルのデータがない場合（ウラル山脈の真ん中にある場合）、なぜこの場合にデータをロードする必要があるのか​​という質問に対する答えは残っています。



1年半前にこの質問に答えました。

最後に、 wikimapia 、 esosedi 、 gdeetotdomおよび（プログラマーの恥と恥！） Aroundmeでのデータのロードの仕組みを比較しましょう 。



ちなみに、示された3つの「スマート」サイトは「z-tiles」エンコーディングを使用していることを明確にする必要があります。実際、パスはクワッドツリーにありますが、Wikimapiaはそのapiを通じてxzyアドレス指定でデータを要求できます。



それだけです



質問があれば、私の考えがこれらの考えを必要としている人々に届くことを願っています-尋ねてください。

地図作成に関する質問がある場合は、ブログ （ blogspot mirror）を不器用な英語で開始しなければならなかったので、質問してください。



それでは、ハブでこれまでに発表されなかった多くの新しい秘密をお伝えする2番目の記事を書き終えます。 コーヒーとチャットの在庫はありますか


More articles:


All Articles