logo logo_atte 日記 随筆 何処
軌跡ヘルプ
track-viewer
Leafletを利用した軌跡表示プログラム。
サンプル
サンプル軌跡は雲取山に行ったときのもの。
操作方法
地図左上の拡大アイコンをクリックすると全画面表示に切り替わります。全画面表示の左上の縮小アイコンをクリックすると元の画面に戻ります。全画面表示の右上のレイヤーアイコンから、地図の種類を変更したり、写真や色別標高の表示/非表示の切り替えができます。
利用方法
CSSJSを読込。
  1. <link rel="stylesheet" href="track-viewer.css">
  2. <script src="track-viewer.js"></script>
source
divタグにtrack-scopeクラス指定する。 data-geojson属性でジオメトリデータを格納しやファイルを指定する。全画面表示用の領域としてtrack-screenクラスが指定されたdiv要素が必要であるが、存在しなければjavascriptが自動で作成する。
  1. <div class="track-scope" data-geojson="geodata.geojson"">
  2. <div class="track-screen"></div>
source
geojsonファイル
軌跡はMultiLineStringをgeometry属性に持つFeatureで、 MultiLineStringを構成するPointは、 4次元(もしくは2次元か3次元)の[経度,緯度(,高度,UNIX時間)]形式である。その他の全てのマーカーはPointをgeometry属性に持つFeatureである。各Featureのproperty属性のkind要素にてマーカーの意味が決まる。 kindの意味は以下の通り。
track:軌跡
bound:軌跡を表示する地図の範囲
:左下(最小経度.最小緯度)と右上(最大経度.最大緯度)の座標値
image:サムネイル画像
point:空間経過点(1キロ毎)
tmpost:新時間経過点(15分毎)
sppost:新空間経過点(1キロ毎)
軌跡ページ
tikiでは軌跡は軌跡ページのattachmentとして登録する。
登録概要
軌跡ファイルは軌跡ページの'attachment'として登録しておく必要がある。画像ページのページIDは'track-yyyymmdd'である。ページIDの後半部'yyyymmdd'を軌跡IDと呼ぶ。 'yyyymmdd'は軌跡ページが作成された年月日である。
スコープ表示
登録された軌跡を表示する。必須の第1引数は軌跡IDを指定する。表示させる画像のサイズ(スケール識別子)をscaleで指定する。冒頭のサンプルで表示した軌跡のソースコードは次の通りである。
  • +[track-scope](20181028,scale=M);
source