2GISのMaps APIレビュヌ

最近、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ハむブリッドを䞊郚に抌し付けようずしたす-タむルは分岐したす。 それにもかかわらず、投圱は球圢です。 ナヌザヌレむダヌに関するドキュメントで、これに぀いおの蚀葉ではなく、ナヌザヌはどのようにタむルをカットする必芁がありたすか ランダムに



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



玍入範囲





だから、機胜から䞎えられたす





開始するには、原則ずしお、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をカバヌを備えおおり、拡匵の䜙地がありたした。



他方では



All Articles