前回の投稿まで「OpenLayers 3 を使ってみよう」と題して，OpenLayers 3 を使って，地図に経路データなどを表示するやり方について述べ， 最後にまとめとして，OpenLayers 3 を使ってみて気づいた点についてまとめてみた。
今回は，KML ファイルのフォーマットについて書いておこうと思う。
KML フォーマットについては，Google マップでの KML レイヤのガイドに詳細な記述がある。 しかし，詳細すぎてよくわからなかったりもする。 OpenLayers 3 では，基本的に Google Maps の KML と踏襲しているようであり，ここでは具体的に KML ファイルについて書いておこうと思う。
私自身が KML ファイルの例を，GNSS/GPS 経路の表示に OpenLayers 2 を使う（その5：KML ファイルで経路を表示）やGNSS/GPS 経路の表示に OpenLayers 2 を使う（その6：KML ファイルで経路とマーカーを表示）に載せているが，そこでは経路用の KML については説明したが，停留点（マーカー）用のものについては説明をちゃんとは書いていなかった。 そこで，今回まとめて書いておこうと思う。
KML ファイルは web のソースファイルと同じように，「<XX>」と「</XX>」で挟まれた XML の構造体で書かれている。 KML ファイル全体は「<kml>」と「</kml>」で挟まれている。 その中にさらに「<Document>〜</Document>」で挟まれたメインパートがある。 私が扱うものでは，「<kml>〜</kml>」の中の全部が「<Document>〜</Document>」となっている。 下記の例では灰色で書かれた部分が相当している。
「<Document>〜</Document>」の中に「<description>〜</description>」， 「<Style>〜</Style>」，「<Folder>〜</Folder>」という要素が含まれている。
以下に経路用の KML の例を示そう。詳しい説明は KML ファイルの下に書くことにする。
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<description>
<![CDATA[<p>菊水山～摩耶山2014</p><p><a href="http://xxx.yyy.zzz">web site</a></p>]]>
</description>
<Style id="Line_1">
<LineStyle>
<color>ff0000ff</color>
<width>3</width>
</LineStyle>
</Style>
<Folder>
<name>Tracks</name>
<Placemark>
<name>Track 1</name>
<description><![CDATA[Original tracking filename : LOG00492.nma<br>From: 34.69,135.14<br> To: 34.71,135.21]></description>
<styleUrl>#Line_1</styleUrl>
<LineString>
<extrude>0</extrude>
<tessellate>1</tessellate>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>
135.145456666667,34.69276,182.9
135.145503333333,34.6927733333333,181.6
135.14571,34.6927833333333,168.8
135.1459,34.6927066666667,160.3
135.146138333333,34.69277,158.2
135.146196666667,34.6929933333333,155.3
135.1464,34.6930033333333,158.4
135.146621666667,34.69311,161.1
135.147,34.6930316666667,164.6
135.147153333333,34.6929166666667,166.5
135.147426666667,34.6929216666667,168.6
</coordinates>
</LineString>
</Placemark>
</Folder>
</Document>
</kml>
「<description>〜</description>」はタイトルなど，このファイル全体に関する説明であり，様々なことが記述できるように「<![CDATA[」と「]]>」で挟まれている。「<Style>〜</Style>」はラインのスタイルを記述している。 ここでは「<Style>〜</Style>」の中にさらに「<LineStyle>〜</LineStyle>」が含まれている。 その中で経路を記載するラインの幅や色を定義している。
「<Folder>〜</Folder>」の中に「<Placemark>〜</Placemark>」があり，その中で具体的な経路が記述されている。 ラインのスタイルは「<styleUrl>〜</stleUrl>」で「Line_1」を使うと指定してある。 ここで，スタイルの指定は URL で行わないといけないため，「Line_1」の前に「#」がつけてある。 具体的な点は「<coordinates>〜</coordinates>」で挟まれ，１行に１点で経度，緯度，高度が記載されている。 高度に関しては，「<altitudeMode>clampToGround</altitudeMode>」としてあるので，意味がないかも…。
次に停留点（マーカー）用の KML ファイルの例をみてみよう。 ここでも KML ファイル全体は「<kml>」と「</kml>」で挟まれている。 その中にさらに「<Document>〜</Document>」で挟まれたメインパートがある。 「<Document>〜</Document>」の中に「<description>〜</description>」， 「<Style>〜</Style>」，「<Folder>〜</Folder>」という要素が含まれているのは，経路用の KML ファイルと同じ構造となっているが，具体的な中身が多少変更されている。
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<description>
<![CDATA[<p>菊水山～摩耶山2014</p><p><a href="http://xxx.yyy.zzz">web site</a></p>]]>
</description>
<Style id="StartIcon">
<IconStyle>
<scale>1</scale>
<Icon><href>https://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/hiker.png</href></Icon>
<hotSpot x="16" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>
<Style id="EndIcon">
<IconStyle>
<scale>1</scale>
<Icon><href>https://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/red-pushpin.png</href></Icon>
<hotSpot x="10" y="1" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>
<Style id="PhotoIcon">
<IconStyle>
<scale>1</scale>
<Icon><href>https://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/camera.png</href></Icon>
<hotSpot x="16" y="6" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>
<Folder>
<name>Icons_on_the_Map</name>
<Placemark>
<name><![CDATA[<div id="wp_name">出発点</div><div id="wp_address">兵庫県神戸市兵庫区烏原町</div>]]></name>
<description><![CDATA[<div id="wp_time_info">2014/09/15 10:52:35</div>]]></description>
<styleUrl>#StartIcon</styleUrl>
<Point><coordinates>135.145456666667,34.69276,182.9</coordinates></Point>
</Placemark>
<Placemark>
<name><![CDATA[<div id="wp_name">Photo Point</div><div id="wp_address">兵庫県神戸市兵庫区烏原町</div>]]></name>
<description><![CDATA[<div id="wp_time_info">2014/09/15 10:53:04</div><div id="wp_photo_info"><a href="./P1110839.html" target="_blank"><img src="../../motorcycle/Maya_20140915/image/P1110839_thumb.png"></a> </div>]]></description>
<styleUrl>#PhotoIcon</styleUrl>
<Point><coordinates>135.1459,34.6927066666667,160.3</coordinates></Point>
</Placemark>
<Placemark>
<name><![CDATA[<div id="wp_name">終点</div><div id="wp_address">兵庫県神戸市灘区箕岡通４丁目３</div>]]></name>
<description><![CDATA[<div id="wp_time_info">2014/09/15 17:09:02</div>]]></description>
<styleUrl>#EndIcon</styleUrl>
<Point><coordinates>135.21635,34.7197883333333,138.1</coordinates></Point>
</Placemark>
</Folder>
</Document>
</kml>
「<description>〜</description>」がタイトルなど，このファイル全体に関する説明が書いてあるのは，経路用の KML と同じである。「<Style>〜</Style>」ではアイコン（マーカー図形）のスタイルを記述している。 ここでは「<Style>〜</Style>」の中にさらに「<IconStyle>〜</IconStyle>」が複数含まれている。 その中でマーカー用のアイコン画像の URL や，描画する際の基準点（hotSpot）に関する記述などが書かれている。 この例では，アイコン画像の描画の基準点は，具体的に以下のように書かれている。
<hotSpot x="16" y="6" xunits="pixels" yunits="pixels"/>ここで使われているアイコン画像は，https://maps.gstatic.com/（Google Maps 関連のサイト）のものであり，基本的に大きさが 32 pixel × 32 pixel の画像である。 その画像の中のどの位置を描画の基準点とするかが，左下の点を基準に書かれている。 上記の例だと，横方向が左から 16 pixel 地点（16/32 = 0.5 の地点）であり，縦方向が下から 6 pixel 地点となっている。 この値は図形によるが，この例はカメラマークであり，画像が横長であるため下部に空白がある。そのため縦方向は 6 pixel 浮かせた点を基準点としている。 また，ここでは「pixel」単位になっているが，
<hotSpot x="0.5" y="0.1" xunits="fraction" yunits="fraction"/>のようにアイコン画像の割合で指定することもできる。
同じサイトには多くのアイコンがあるが，私がツーリング用の地図のためによく使うアイコンの場合の基準点の例を以下に示しておく。 いずれも「https://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/xxxx」（xxxx に以下のファイル名が入る。押しピンのみ red-pushpin の用に色が頭につく）という URL を持っている。
| red-pushpin.png | x='10'，y='1' | 押しピン | |
| parkinglot.png | x='12'，y='4' | 駐車場 | |
| man.png | x='18'，y='2' | 人 | |
| flag.png | x='12'，y='2' | 旗 | |
| tree.png | x='16'，y='4' | 木 | |
| cycling.png | x='27'，y='2' | 自転車 | |
| shopping.png | x='12'，y='3' | 買物 | |
| grocerystore.png | x='18'，y='4' | お店 | |
| gas.png | x='17'，y='4' | ガソリンスタンド | |
| camera.png | x='16'，y='6' | カメラ | |
| hiker.png | x='16'，y='2' | ハイカー | |
| info.png | x='10'，y='3' | インフォーメーション |
話を停留点用の KML ファイルに戻すと，「<Folder>〜</Folder>」の中に「<Placemark>〜</Placemark>」があり，その中で具体的な情報が記述されている。 アイコンの名前（タイトル）を表す「<name>〜</name>」， アイコンの情報を表す「<description>〜</description>」， どのアイコン画像を使うかを示す「<styleUrl>〜</styleUrl>」， 表示する地図上の座標点を表す「<Point>〜</Point>」が記載されている。 ここで，スタイルの指定は URL で行わないといけないため，「StartIcon」などの前に「#」がつけてある。
0 件のコメント:
コメントを投稿