More Related Content
Recently uploaded
Recently uploaded (8)
Featured
Featured (20)
20160608ジオメディアサミット
- 3. 駅すぱあと路線図02
- 4. 駅すぱあと路線図特徴 • 全国をWEB地図のように、シームレスに 俯瞰できる路線図 • プログラマブルに路線図を操作するための 各種JavaScriptAPIをご用意 • 上位レイヤーに任意の情報をマッピング 03
- 6. 路線図で利用可能な機能の一部 • 駅、路線、駅間のクリックイベント設置 • 駅にマーカー、画像などの表示 • 路線の強調表示 • 駅間の強調表示と画像などの表示 • 緯度経度から駅までの距離を取得 05
- 16. 多言語対応15 英語より順次対応
Editor's Notes
- 駅すぱあとという鉄道、バスの経路探索のアプリの提供を行っています。
- そんなヴァル研究所が新しい路線図を作りました。
- シームレス 他のサイト、アプリに用意にマッシュアップ可能なJavaScriptAPI 駅に特化した表現
- 簡単に概要を説明致します。 路線図の図そのものはイラストレーターで作られ、それをイラストレーターの機能で、SVGファイルで出力します。 そのSVGファイルから256×256のタイル画像データを生成しCDNのfastlyで配信、 また同じSVGファイルから図形判定用のpath、rectデータを生成しGISデータベースに入れて、交差判定などを行います。 WEB地図のように呼び出すところは、leafletjsを使用し、 さらに路線図用にラップしてrosen.jsという物を作りその他サーバアクセスを可能としております。 下段中央にあります、各種サービス用WEBサーバというのはマッシュアップ先のサービスを想定しておりまして、 各種サービスでrosen.jsを呼んで頂き、路線図のメソッドをコールして頂ければ様々な操作が路線図に対して可能となっております。
- こちらは機能の一部なのですが、次のスライドから具体的に見ていきます。
- highlightLineというメソッドを用意しております。
- highlightSectionsというメソッドを用意しております。
- 駅ごとに緯度経度の情報を持っているため、距離を算出できます。 また近似値を用いて駅以外の所に、誤差がありますが、おおよその位置でプロットすることも可能です。
- 弊社WEBサービスとの連携例になりますが、 経路探索結果をグラフィカルに表現可能となります。
- 赤が10分以内、オレンジが20分以内、黄緑が３０分などで色分けされています。
- 経路探索のログを使用して、２０１６年３月に、東京駅発で検索された目的地をランキングしております。 マーケティングデータへの活用を考えております。
- この路線図を、マッシュアップする開発者が迷わず組み込めるように、よくあるサンプル集を作っています。
- 当然APIリファレンスをご用意いたしまして、実装可能な全てのメソッドを見ることが出来ます。