高く評価されているKasheyの投稿では、地図上にオブジェクトを表示する方法が随所で議論され ました 。
この方法を研究した後、私は最大の自動車資源にそれを実装し始めました。
コードの大部分が作成された11月に、予期せぬ事態が発生しました。Googleは、検索結果を含む地図の写真（タイル）をその場で作成する地図サービスを開始しました。
私はこのテクノロジーを「にきびテクノロジー」と呼んでいます-検索結果は、マップレイヤーの上にある別のレイヤーであるpng画像に直接適用された小さな赤いドットで表示されます。 こちらで見れます 。
データを別のレイヤーとして表示することは、たとえばwikimapia.orgで長い間使用されてきました。 Googleの主なブレークスルーは、「にきび」のある写真が「オンザフライ」で作成され、サーバーにキャッシュされないことでした。 これには、大きなサーバーオーバーヘッドが必要です。
テストを実施したところ、最新のサーバーは1秒間に最大160タイルを描画することがわかりました。 負荷を比較することにより、1台のサーバーで同時に接続できるユーザーが何百人もいないことが明らかになりましたが、これは非常に小さいです。 さらに、この技術にはいくつかの重大な欠点もあります。
- 多数のサーバー要求（タイルごと）
- タイルのリクエストごとに表示するオブジェクトを選択する必要性
同時に、重要なプラスがあります-「クラスタリング」せずに多数のオブジェクトを表示する機能、およびクライアントとブラウザのDOMの負荷。
ちなみに、立ち上げたばかりのrealty.yandex.ruでは、カードはDOMで作成されています（つまり、各マーカーはDIVです）。 したがって、 このようになります
地図を一周して......
その後の研究の結果、いわゆる 「ハイブリッド」システム。
「ハイブリッド」の本質は、ブラウザの機能に応じて（もちろん、私たちが話している）、データを表示する独自の方法が使用されることです。
そのため、たとえば、最新のブラウザ（つまり、バージョン9までを除く）はすべてcanvasタグをサポートしています。
これらのブラウザーでは、クライアント上にオブジェクトを含むレイヤーを直接描画する技術を適用しました。
したがって、マップを移動/ズームすると、サーバーへの要求は1つだけ発生します。 データを受信した後、ブラウザ自体がレイヤーを描画します。
表示の2番目の方法-ie8およびその他のブラウザーの場合-dataUrlを使用します。 繰り返しますが、それぞれの動きに対して-1つのリクエスト。 画像はサーバー上に描画され、データとともに1つのxmlファイルに送信されます。
現在までに、そのような要求-約18％。 割合が徐々に減少することは明らかです。
3番目の方法は古典的です。 最初にデータが送信され、次に写真が要求されます-各要求には独自の写真があります。 これは、7以下の場合です。 そのようなものの約6％があります。 このメソッドは、Googleマップで使用されます。
全体として、このようなハイブリッドを使用すると、「クラシック」に比べてリクエスト数が4倍減少し、サーバーの負荷もほぼ4倍になりました。
マップには、タイルごとに最大100個のオブジェクトが表示されます。 平均的なウィンドウサイズでは、これは最大2400にきびです。
フェッチとキャッシュ
それとは別に、データの検索に関する問題は解決されました。
すべてが単純であり、いくつかの既知のカテゴリのデータのみを表示する必要がある場合、庭をブロックする意味はありません。 しかし、タスクは検索バーのキーワードによって出力を取得することでした。 もちろん、スフィンクスはこのために接続されていました。
しかし、問題は異なっていました。
カードが移動するたびに、リクエストを再度作成し、パーサーとスフィンクスを介して実行し、mysqlを介してポイントを取得する必要があります...これを何らかの形で単純化する必要があります...
その結果、memcacheを使用してphpキャッシュエンジンが作成されました。
すべては次のように発生します。
サーバーは検索文字列（たとえば、「Audiディーラー」）を受信し、それを解析してsphinxに送信します。 Sphinxは検索結果を返し、ポイントを受け取るためのmysql-requestが生成され実行されます。 すべての受信ポイントはパックされ、memcacheに送信されます。
したがって、10,000ポイントが見つかった場合、キャッシュサイズは約1 MBです。 計画どおり、これは最大サイズです。
さらに、カードがポイントを要求すると、データはmemcacheからロードされ、非常に迅速に検索されます。
非常に高速-これは10,000ポイントあたり最大0.02秒です。 キャッシングクラスでは、サンプルにはネイティブphp関数のみが使用され、値の列挙を含むループは使用されません。
キャッシュの存続期間は3分以内です。 キャッシュに必要なデータがない場合、リクエストは再度生成、実行、キャッシュされます。 これを行うには、マップのタイルとデータのリクエストで検索文字列が複製されます。
一般に、キャッシュクラスは、ディスクキャッシングを含むさまざまな方法でキャッシュする機能を提供します。 検索バーではなく、カテゴリ、さまざまなリスト、およびジャックドーを含むメニューを使用する必要がある場合。 要求のタイプの数が有限の場合、この方法が適しています。
マーカー
初期化中にカードを管理するサーバークラスは、マーカーとその説明を含むスプライトを受け入れます。
説明-これは、サイズ、スプライト内の位置、アンカー、シャドウなどです。
したがって、非常に多数のマーカーをスプライトに埋めて、それらをすべてマップ上で使用できます。 私のシステムのマーカーのサイズは最大200x200であり、これで十分です。
データをエンジンに転送するとき、各ポイントに対して、シャドウとホバーを使用して（スプライトから）独自のマーカーを設定できます。 そして、それは表示されます（3つの方法のいずれかで）。
カードレベル
国、地域、都市の3つのレベルのマップを使用することが決定されました。 「国」のレベルでは、地域の首都のマーカーを、「地域」-都市、「都市」-ポイント（「ニキビ」）のレベルで表示します。
レベルの数は設定によって調整されます。
しかし、Yandexはどうですか？
わずかな変換で書かれたエンジンでは、Yandexカードのサポートを埋め込むことができます。
しかし、そのようなタスクは提起されなかったため、実現されませんでした。
現在までに、プロジェクトは80％で記述されていますが、基本的なアイデアはすでに実装されています。
ここで見ることができますrussia.auto.ru
ここにclub-lexus.ru/partners/index.php?city=1&mode=citymap