最近、2GISは独自のマッピングJS APIのバージョン1.0のリリースで私たち全員を喜ばせました。 国内生産のAPIカード-まれなこと; たとえば、Mail.ruとRamblerは、約束されたものの、 証明されていません（ 証明1 、 証明2 ）。 ノボシビルスクの人々に何が起こったのか見てみましょう。

知り合いになる

延期せず、「 クイックスタート 」セクションを開き、提案されたコードをコピーします。 動作します！ 確かに、タイトルにはkrakozyabryが表示されていますが、文字セットを示すタグがないため、驚くことではありません。 まあ、さて、人生のささいなこと。 コードを見てください。

//   ,   : var myMap = new DG.Map('myMapId'); //   : myMap.setCenter(new DG.GeoPoint(82.927810142519,55.028936234826)); //   : myMap.setZoom(15); 

ふむ 漠然と 何かが私にこのことを思い出させます。 setCenterをすぐにズームするように設定できない理由は明らかではありません。 「myMap.setZoom（15）;」という行をコメントアウトすると、マップには0番目の縮尺が表示されます。 興味深いことに、タイルはすぐにロードを開始しますか？ 私たちはスニファーを見る-はい、確かに。 ブラウザは2組のタイルを出力します。1つは0スケール用で、もう1つは15スケール用です。どういうわけか不正確です。 今後：setCenterでズームを設定できますが、この情報に関するドキュメントを見つけるのは簡単ではありません。

わかった さらに調べます。

  //     : myMap.controls.add(new DG.Controls.Zoom()); //  : var myBalloon = new DG.Balloons.Common({ //     : geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826), //   : contentHtml: '!<br>    :)' }); //  : var myMarker = new DG.Markers.Common({ //      (  ,  ,   ): geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826), // ,       : clickCallback: function() { //      : if (! myMap.balloons.getDefaultGroup().contains(myBalloon)) { //    : myMap.balloons.add(myBalloon); } else { //       ,    : //  : myBalloon.show(); } } }); //  : myMap.markers.add(myMarker); }); 

一見、何もないように思えます。 もちろん、いくつかの奇妙な点があります（htmlContentの代わりにcontentHtml、コールバックのコンテキストを設定できない）。 しかし、ここでマップ上のバルーンの位置を決定するコードは私に衝撃を与えました：

 if (! myMap.balloons.getDefaultGroup().contains(myBalloon)) 

それよりも何とか簡単ですか？ たとえば、IsOpenバランメソッドを実行しますか？

彼女は中にネオンを持っています

さて、クイックスタートを離れましょう。 中身を見てみましょう。



1.5 Kbプリローダーは優れています。 200 KbのAPIコードは正常です。 タイミング-まあまあ。 955バイトのCSS-wtf？

ほとんどの警告は、APIを備えたスクリプトヘッダーです。 キャッシングなし-奇妙な。 最後の変更の日付は1月17日です。これは、バージョン番号を変更せずにスクリプトが修正されることを意味します。これは少なくとも良くありません。 IPA監査を修正する機会はありません。大規模な商業プロジェクトでは、これは余分で非常に不快な負担です。 （ところで、今朝、2GIS-ovsky API flamp.ruのベータテスターで、カードは開かれませんでした。結局のところ、注意が必要です。）

APIは、グローバルスコープに3つの変数を作成します-DG（Dolce＆Gabbana？Deutsche Grammophon？名前空間に最適ではありません）、OpenLayers（サプライズ！）および$。

コードを調べます。 確かに、古き良きOpenLayersに出会えます。

決定は奇妙です。 まず、OpenLayersは、それを穏やかに言えば、人生に遅れをとっています。2012年に、変換と遷移を使用せずに作業することは、すでに悪いことです。 第二に、BSDライセンスはいくつかの制限を課しています（http://trac.osgeo.org/openlayers/browser/license.txt）。これは実際に遵守する必要があります。

$は、プロトタイプからグローバルエリアに表示されます。 少なくとも、カスタムjQueryを$に接続するとき、それが彼であることがわかります（それでは、プロトタイプの存在の痕跡を常に削除できないのは何ですか）。

ちなみに、レイアウトはどのバージョンのIEでも動作モードになります-APIでQMをサポートすることが依然として望ましいです。

タイル自体は小さく、それぞれ20 KBです。 デスクトップバージョンから得たと思われるレンダリング。



一方では、基質はウェブマッピングのために非常に近代的に作られています-グーグルに似たグレーの色調で、詳細で過負荷にならず、あまりコントラストがありません。

一方、フォントとサブピクセルアンチエイリアシングの操作はひどいです。 さらに、サーバーへのpingは非常に大きくなります。

座標の順序は長緯度です。 Googleのような球面投影法か、Yandexのような楕円投影法はどちらだろうか？ ドキュメントには答えがありません。 私たちは、Yandexハイブリッドを上部に押し付けようとします-タイルは分岐します。 それにもかかわらず、投影は球形です。 ユーザーレイヤーに関するドキュメントで、これについての言葉ではなく、ユーザーはどのようにタイルをカットする必要がありますか？ ランダムに？

わかった 準備が完了したら、次に進みます。

納入範囲

だから、機能から与えられます：

• カード自体。
• タグ
• グラフィックス;
• コントロール（または、コントロール-ズーム）;
• 層
• AJAXリクエストのAPI。
• 検索。

開始するには、原則として、APIは正常です。 事前にインストールされたコントロールの欠如だけに驚いた-それをする時間がありませんでしたか？

ドキュメントを読みます。 Point-GeoPointに関するセクションはスキップします。すべてが標準です。 ここでのみ、設計に取り組むことができます。クラスインターフェイスの説明を読むことは完全に不可能です。すべてがマージされます。



「マップ」セクションに進み、「はじめに」-「ライブラリのダウンロード」-「ライブラリのバージョン」を見つけます。 これを「マップ」セクションに表示するのはどういうわけか予想外ですよね？

次に、DG.autoload関数を使用して、カードの初期化コードを配置します。

[コード]

この方法は、「クイックスタート」セクションで検討されました。 ただし、DG.autoload関数には一定の制限があります。内部では、window.onloadイベントハンドラーを使用します。 したがって、window.onloadハンドラーがページで既に定義されている場合、競合が発生します（これらの競合を回避するには、既存のwindow.onloadハンドラーにカード初期化コードを挿入できます）。

WTF？ window.onloadを再定義する理由 書く

  window.attachEvent && window.attachEvent('onload', callback) || window.addEventListener('load', callback, false); 

ドキュメントのこの段落よりも高速になります。 しかも、このメモがクイックスタートから削除されたのはなぜですか-より多くのユーザーがこのレーキを踏んだのですか？ 何も考えずに。

続きを読む：

マップの中心を設定するには、setCenterマップメソッドを呼び出します。

 //       point:myMap.setCenter(point); 

「ポイント：」とは何ですか？ ずさんな。

カードを削除

myMap.destroy（）

マップに含まれるすべてのオブジェクトを破壊します。 このメソッドを呼び出した後にmyMapオブジェクト自体を破棄するには、マップオブジェクトにnullを割り当てることをお勧めします。

 //  .   ,       ID: var myMap = new DG.Map("myMapId"); //  .  DOMElement : var container = document.getElementById("myMapId"); //   ,    DOM   var myMap = new DG.Map("container"); //   ,       ID var myMap = new DG.Map("myMapId"); 

どのような奇妙なコードですか？ 彼は破壊と何の関係がありますか？ 皆さん、基本クラスのドキュメントを読む必要があります。

イベントハンドラーを追加する

myMap.addEventListener（objectId、eventType、コールバック）

パラメータ：
objectId StringハンドラーをアタッチするDOM要素の識別子。

ギャップテンプレート。 イベントハンドラーをマップにアタッチするときにDOM要素を指定する必要があるのはなぜですか？ map.getContainerId（）以外のIDを指定した場合、何も機能しません。 ユーザーに対するある種の暴力。

地図を北に移動

myMap.moveN（moveStep）

パラメータ：
moveStep Numberはいマップを北にシフトするピクセル数によるステップ。

再びギャップパターン。 北へのピクセル-それはどうですか？ 北への弧の角度-私は理解し、ピクセルが上-私は理解し、北へのピクセル-私は理解していません。 まあ、この方法の存在の意味は私を免れます。

最小ズームを設定する

myMap.setMinZoom（minZoom）

パラメータ：
minZoom Numberはい可能な最小のズーム係数。 許可される最小値は1です。

最小許容値は1で、ズームコントロールも1未満のスケールを設定しません。 ただし、マップの初期化中に縮尺を設定しないと、0になります。 どうだろう。 ちなみに、0番目のスケールでは、getBoundsは地域[-268、434]を経度でマップします。180度を超える経度はどのくらいありますか？

地図の境界線に制限を設定する
myMap.setBoundsRestrictions（境界、isChangePosition）

isChangePosition？ まだ英語の友達でなければなりません。

イベント

すでにaddEventListenerの奇妙なことに出会っています。 さらに-さらに：addEventListenerはそうですが、removeEventListenerはそうではありません。 なぜDOM名を使用してユーザーを誤解させるのですか？

イベント名は、「DgClick」-g smallのように記述する必要があります。 他のすべての場所では、DGは常に大文字で綴られています-迷惑なほど一貫性がありません。 ちなみに、この例でも、カードはズームなしで初期化されます。

ほとんどすべてのイベントには独自のタイプがあります。 非常に多くのクラスを持っているという感覚は私を逃れます。 たとえば、DG.Events.Mapに（最小|最大）ズームを取得するように要求できます-なぜですか？ この機能が必要なのは誰ですか？

マーカー

コンストラクター

パラメータ：
options.geoPoint DG.GeoPointマーカーが指すポイントの地理的位置。
options.icon DG.Iconマーカー画像。 DG.Iconクラスについては、以下で詳しく説明します。 アイコンが指定されていない場合、デフォルトの画像が使用されます。
options.clickCallback Functionマーカーがクリックされたときに呼び出されるハンドラー。 関数呼び出しコンテキスト：ウィンドウオブジェクト。

もちろん、クリック時のコールバックは便利です。 しかし、その後、実際にさらに進んで、少なくともmouseenter / mouseleaveでコールバックを行う必要があります。

各マーカーは特定のグループに属している必要があります。 これにより、グループ操作を実行できます。 たとえば、2種類のマーカーがあります。1つは高層ビル用、もう1つは民家用です。 前者を1つのグループに配置し、後者を別のグループに配置することにより、各マーカーセットを明示的に操作できます。

もちろん、マーカーのグループ化は便利です。 しかし、なぜグループをグループにネストできないのですか？ これはさらに便利であり、デフォルトグループを持つ必要がなくなります。

バラン、グラフィックス、レイヤーにはまったく同じグループが利用できることに注意してください。 それらをすべて別々に記述するのはなぜですか？ 共通の基本クラスGroupおよびGroupManagerを入力すると、ドキュメントが半分になります。

グループ内の各マーカーに対して操作を実行します。
myGroup.forEach（コールバック、コンテキスト）

エヘム。 他のメソッドでは実行コンテキストを指定できませんでしたが、ここでは指定できます。 ブラウザのArray.forEachと同様ですか？ それでは、addEventListenerで始まる他のすべてのメソッドをブラウザーの署名にキャストする必要があります。 ところで、JS 1.6では、forEachのコンテキストパラメータはオプションとは異なります。

バラン

バルーンを作成する例を考えてみましょう。

 //       : var myBalloon = new DG.Balloons.Common({ // ,    : geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826), //   : contentHtml: '!   :)' }); //    : myMap.balloons.add(myBalloon); 

コードの中央にある空の行は、（クイックスタートではなく）エスケープするのを忘れた<br>です。 繰り返しますが、面倒です-例は現在動作していません。

バランのパラメーターは、英語と常識（isClosed-クロスを表示するかどうか、contentSize-サイズが固定されているかどうか）の自由な使用に再び驚かれています。

バルーンにイベントがない（または記述されていない）のは興味深いことです。

ヒントはありません。 しかし、彼らは傷つけないでしょう。

幾何学

ジオメトリについて悪い言葉を言うことはありません。幅広いカスタマイズオプション（linecapオプション-ブレークポイントでの丸線の選択-出会ったことはないようです）を備えた、優れた堅実なグラフィックライブラリです。 イベントがないことは驚くべきことではありません。 （しかし、それはなぜ驚くべきことでしょうか？問題は知られています-透明なキャンバス/ svgコンテナでさえマップ自体をカバーしています。解決済み:)）。 左に調査を追加します。

コントロール

ポジショニングコントロールは、ユーザーの脳に対する暴力のもう1つの例です。

 myMap.controls.add(new DG.Controls.Zoom(), null, new DG.ControlPosition(DG.ControlPosition.TOP_RIGHT, new DG.Point(20,10))) 

そして、これをすべてコントロールして、右隅に20.10のオフセットを付けます。
ビッグブラザーズも同じバラライカを持っていることを理解しています-しかし、これは失敗した決定をコピーする理由ではありません。 なぜ代わりに

 new DG.ControlPosition(DG.ControlPosition.TOP_RIGHT, new DG.Point(20,10))) 

書かないで

 'topright', [20, 10] 

？
またはこのように：

 { top: 20, right: 10 } 

？

同時に、controls.addでグループ名の代わりにnullを書き込まないように、この設定をコントロールコンストラクターに設定しますか？

コントロールのうち、ズームのみが使用可能です-残りの時間はありませんでしたか？ または、レイアウトデザイナーに問題がありますか？ どうやら、組み込み要素の不足を補うために、カスタム要素を作成するためのインターフェースDG.Controls.Abstractを開きました。

ちなみに、新しいDG.Controls.Abstract（）をカードに追加しようとしました-正常に機能し、例外をスローしませんでした。 したがって、これは抽象的ではなく、基本です。 拡張クラスの継承メソッドを抽象クラスにバインドすることは正しい解決策ではないようです-これは完全に普遍的なメソッドであるため、その使用を特定のクラスに制限する理由です。

インターフェイス自体は非常に健全に見えます-ヘルパーgetStates（）/ setState（）がまったく役に立たない場合を除きます。

レイヤー

マップAPIを使用すると、地理マップレイヤーの上にカスタムレイヤーをオーバーレイできます。 これにより、ほぼすべてのオブジェクト、ルート、エリアを地図に表示できます。 たとえば、インターネットプロバイダーが都市のカバレッジエリアを表示したり、店舗やピザ店の配達エリアを配達の時間と費用とともにグラフィカルに表示したりするのは簡単です。 また、オフィスへの道や市内ツアーのルートを示すこともできます。 要するに、可能性は想像力によってのみ制限されます。

...すでにわかったように、予測を推測する必要もあります。

options.countTileServers Numberタイルサーバーのサブドメインの数。

ブラウザは、1つのドメインから同時にダウンロードされるファイルの数に制限があります。 この制限を回避するには、いくつかのサブドメインからタイルをダウンロードできます。 マップの読み込み速度を最適化するには、この値を4に設定することを強くお勧めします。

このパラメーターは、options.tilePrefixパラメーターと組み合わせて使用​​されます。 デフォルトでは、options.countTileServersはゼロです。タイルは1つのサーバーからダウンロードされます。

options.tilePrefix文字列タイルサーバーのサブドメインの名前のプレフィックス。

たとえば、urlパラメータはhttp：//example.com/$ {z} / $ {x} / $ {y} .pngです。 options.tilePrefixをmytileとして定義すると、http：//mytile1.example.com/、http：//mytile2.example.com/、http：//mytile3.example.com/の形式でタイルサーバーのサブドメインのURLを取得します。以下、options.countTileServersパラメーターに応じて。 したがって、このパラメーターは、options.tilePrefixパラメーターと組み合わせて使用​​されます。

あー どんな魔法？ http：// mytile $ {n} .example.com / $ {z} / $ {x} / $ {y} .png？

アヤックス

AJAX APIの意味は完全には理解されていません。 任意のフレームワークのajax-apiがより便利で機能的です。なぜ地図作成APIがこのクリアリングに登る必要があるのでしょうか？ ところで、タイプミスがあります-失敗しました。

一般的に

全体的に、2GIS APIは二重の印象を残します。

一方で-はい、短時間で開発された本格的なAPIで、優れた機能コンポーネント（ニーズの90％をカバー）を備えており、拡張の余地がありました。

他方では：

• 多くのインターフェイスの思考の欠如と矛盾。
• ルックアンドフィールと呼ばれるものを無視-「グッズ」、地図とUIのセクシーなデザイン。
• 不正確なドキュメント、少数の例;
• APIの一部として実際の2GISデータを操作するためのツールの不足。