HTML5 Canvasモスクワおよびモスクワ地方の郊外鉄道の交通パターン

CanvasとdbCartajsの機能を使用した別の鉄道交通スキーム。

Moscow Rail Map



オリジナルでは、 モスクワ地下鉄と通勤電車の地図と呼ばれ、郊外の電車の前庭で見ることができます。 当初、この特定のカードをdbCartajsプロジェクトの次のデモとして実装したかったのですが、ウェブ上では、品質の悪い携帯電話で撮影したカードのコピーしか見つかりませんでした。 しかし、簡単にモスクワの地下鉄のスキームを見つけました。 私の意見では、ウィキペディアで最も美しく、最も気取らないのは、何らかの理由で機能を備えたYandexでした。 実際、前の記事で書いたCanvasの下で、WikipediaからSVGバージョンを再作成しました。



しばらくして、フォーラムでJPEG形式のスキームの2つのオプションを見つけ、元のアイデアを実装することにしました。 ソースへのリンクが失われたので、もし興味があれば、これらの写真をもう一度オリジナルのmosrailmapvkonturにレイアウトしました



マップバージョンのオンラインバージョンは、 dbcartajs.appspot.com確認できます。 無料ホスティングの視聴回数の制限により、サイトがブロックされる可能性があるため、 githubからプロジェクトを取得して視聴することをお勧めします。



フォントとセンタリングという以前のメトロスキームに関するユーザーのコメントを考慮しようとしました。 このバージョンでは、フォントサイズはマップの幅に沿って拡大縮小されます。センタリングすると、選択したステーションに垂直線と水平線からサイトが表示されます。 ステーションのレイアウト、移植ノードを調べることができます。



これを含むすべてのデモは、完全にJavaScriptで記述されています。 コードを可能な限り簡素化しようとしましたが、jQuery、ExtJsなどのサードパーティライブラリは使用しませんでした。 目標は、Canvasで画像を作成する可能性を探ることです。



dbCartaウィジェットを初めて見る人のために、カード管理について思い出させます。



*左クリックすると、地図上のポイントが平らな投影で中央に配置され、球体が球面投影で回転します。

*ズームボタン[+ |-]はマップの右側にあります。



さらに、ステーションのリストからナビゲーションが可能です。



一般に、彼らが言うように、あなたはポドルスク、リュベルツィ、ルホヴィッツの住民に歓迎されています、白雲母を邪魔しないでください。



All Articles