最終更新日:2019年12月26日
目次
ラインデータ
本講では、 GISデータ のラインデータ(線データ)を追加する方法を扱う。本講で完成するWebGISの例は、ソースコード1である。なお、Leafletを用いたWebGISの基礎構造の知識を身に付けた前提でこの講は話が進んでいくため、Leafletを用いたWebGISの基礎構造の理解が不十分な方は、以下を参照していただきたい。
また、GISデータの概念については、GISデータの概念とポイントデータの追加にて説明しているので、以下を参照していただきたい。
ソースコード1 複数のラインデータを追加したWebGIS
ラインデータの特徴
ラインデータは、GISデータの中でも ベクタデータ の一種である。2点以上の頂点をつなぎ合わせた線状の図形を持つGISデータであり、線データとも呼ばれる。
ラインデータは、線状で表すことができる 地物 を表現するために使われる。具体的に挙げると、以下に挙げるような河川、道路、鉄道などである。
図1 河川
図2 道路
図3 鉄道
このように実際のデータを見ると、複雑な線の形になっているが、このラインデータを単純に示すと、図4のような形となる。
図4 ラインデータの概念図1
ラインデータは、図4のように各頂点の座標を順番に直線で繋いだものである。図4の赤いラインデータは、地図上の道順をイメージして作成したものだが、交差点の頂点として、道順上の各交差点の座標を入れている。このようにラインデータを作成する際には、ラインデータを構成する各頂点の座標を正確に捉えて入力することが重要である。
さらに言えば、ラインデータを構成する頂点は、どのような要素であるかをよく考えることも重要である。図4の例では、道順というラインデータを構成する頂点として、交差点を利用している。ただし、この例では、直線の道だけで構成されているので、交差点を結ぶだけで良いが、場合によっては、道が曲がっていると、曲がり角などに頂点を入れる必要も出てくる。特に、図5の例などは注意が必要である。
図5 ラインデータの概念図2
図5の赤いラインデータは、本来であれば、曲線を描く地物であるため、曲線のラインデータになるべきである。しかし、ラインデータの概念は、あくまで各頂点の座標を順番に繋いだものであるため、曲線は、曲線に見えるように多数の頂点を含んだあくまで直線の集合となる。つまり、ラインデータは通常、曲線を使うことができないのである。ラインデータを扱う場合は、この点を留意する必要がある。河川などの自然物になるとより直線の度合いが低くなってくるので、多数の頂点が必要となる場合が多くある。
最後に、ラインデータはあくまで線状に抽象化したデータであるということを忘れないことが重要である。道路も、河川もその他のラインデータで表すことができる 地物 も実際には線状ではない。道路を例に取ってみれば、道路には幅があり、決して線ではないのだ。ある意味においては、道路の中心線を表しており、幅員を属性データとして持ち、その幅員に基づいて、ラインデータを地図上に表現する際に太さを変えるという方法が採られることもあるが、実際は、単調な幅員を持っているわけでもない。側溝や建造物、工事の都合など様々な要因が影響して、実際には道路は複雑な広がりを持っている。これは河川などにおいても同様である。地図を解釈する際には、現実のどのようなものを抽象化したものなのかを良く想像することが重要である。
1つのラインデータの追加
1つのラインデータを追加するソースコード
ラインデータを追加する第一歩として、まず1つのラインデータを追加したWebGISを作成する。GISデータの概念とポイントデータの追加のソースコード1で作成した東京駅と大手町駅の座標を使い、その2点を直線で結んだラインデータを作成する。このラインデータを追加したWebGISのソースコードは以下の通りである。
ソースコード2 1つのラインデータを追加したWebGIS
Leafletを用いたWebGISの基礎構造に図6の部分が追加されている。処理は基本的には上から順番に行われていくため、WebGISオブジェクトの作成の下に入れる必要がある。
図6 ラインデータの追加処理
基本的な処理の構成は、GeoJSON形式のポイントデータの追加と同じである。図6の処理は2つに分かれている。GeoJSONを用いたラインデータの部分(図6の赤色の部分)と、GeoJSONをレイヤとしてWebGISに追加する処理の部分(図6の青色の部分)である。流れとしては、データを示してから、それをレイヤとしてWebGISに追加するという順番になる。
GeoJSONを用いたラインデータ
まず、GeoJSONを用いたラインデータの部分である。この内容は、図7のように分けられる。
図7 GeoJSONを用いたラインデータの定義
図7のように分けられるため、この後、それぞれの部分について説明を行う。プログラミング的な概念や手続きを無視したい方は、ソースコード5まで進むと良いだろう。
図7の赤色の部分は、GeoJSONのGISデータ一覧であることを示す文言である。図7で、最初にtypeをFeatureCollectionに設定していることが、これらがGISデータの一覧であることを設定する意味合いである。JSONは、GISデータ以外を扱うこともできるため、この文言が必要なのである。featuresとして、[～]の中身を設定している。
featuresの[～]にデータを記述する。データ1つ分を{～}で区切る。1つのGeoJSONのデータは、ソースコード3とソースコード4のような構造になっている。featuresの{～}に書かれているデータを図7の緑色のオブジェクトに入れることとなる。
{
“type”: “Feature”,
“properties”: {
“popupContent”: “<p>東京駅と大手町駅を繋いだ線です。</p>”
},
“geometry”: {
“type”: “LineString”,
“coordinates”: [
[139.767, 35.681],
[139.7659, 35.6846]
]
}
}
ソースコード3 GeoJSONのラインデータの例
{
“type”: “タイプ”,
“properties”: {属性情報
“popupContent”: “ここに入れた内容がクリックするとポップアップするようになる。”
},
“geometry”: {位置情報
“type”: “GISデータの種類”,
“coordinates”: [
[頂点1の経度, 頂点1の緯度],
[頂点2の経度, 頂点2の緯度],
(中略)
[頂点x-1の経度, 頂点x-1の緯度],
[頂点xの経度, 頂点xの緯度]
]
}
}
ソースコード4 GeoJSONのラインデータの構造
データ部分は、ソースコード3とソースコード4のようになっている。地理情報の概念をもって読むとわかりやすいだろう。赤色の部分で、データのタイプを設定する。JSONは、GISデータ以外を扱うこともできるため、GISデータであることを示すために、 type として、 Feature を設定する。
続いて、緑色の部分の properties である。 properties は、属性情報である。ここには様々な情報を入れることができる。ただし、その情報をWebGIS上で利用するためには、図形をレイヤに追加する処理に加えて、追加の処理が必要となる。本講では、この後、属性情報をポップアップ表示できる処理を追加するため、 popupContent を属性データとして追加する。 popupContent には、通常の文字以外に、HTMLタグを入れることができる。また、 popupContent の名前は、この後に追加するポップアップ表示の処理に記載する名前と同じであれば、他の言葉でも良い。
最後に青色の部分の geometry である。 geometry は、位置情報である。まず、 type として、GISデータの種類を設定する。今回は、ラインデータを利用するため、 LineString を設定する。さらに、 coordinates として、[～]に各頂点の座標を設定する。ポイントデータとは違い、ラインデータは複数の頂点が必要となってくるため、 coordinates の[～]内に改めて、[経度, 緯度]を使って、各頂点の座標を指定していく。今回のポイントは、東京駅と大手町駅の座標となっている。なお、注意すべきポイントは、Leafletの通常処理とGeoJSONでは、緯度経度が逆になっているところである。
このように長々と説明をしてきたが、形を覚えてしまえば、基本的には同じ事の繰り返しであり、中身を多少買えれば良いだけである。
{
“type”: “Feature”,
“properties”: {
“popupContent”: “<p>東京駅と大手町駅を繋いだ線です。</p>”
},
“geometry”: {
“type”: “LineString”,
“coordinates”: [
[139.767, 35.681],
[139.7659, 35.6846]
]
}
}
ソースコード5 GeoJSONのラインデータを作成する際に変える部分
このように、ソースコード5の赤色の部分だけをデータに応じて変更すれば、地球上のどんな位置同士もラインデータとして繋げて表すことができる。とりあえず、最低限の原則として、この形を覚えておけば、GeoJSONを用いた基礎的なGISデータを入れることができるのである。
なお、位置座標を調べるためには、以下のツールを利用することもできる。
GISデータをレイヤとしてWebGISに追加する処理
Leafletを用いたWebGISの基礎構造でやった通り、レイヤを地図としてWebGISで見るためには、WebGISオブジェクトに追加しなければならない。よって、今回設定したラインデータもレイヤとして、WebGISオブジェクトに追加する処理が必要となる。それが図6の青色の部分である。
L.GeoJson(myPoints,
{
onEachFeature: function onEachFeature(
feature,
layer
){
if(feature.properties && feature.properties.popupContent){
layer.bindPopup(feature.properties.popupContent);
}
}
}
).addTo(mymap);
ソースコード6 GeoJSONのGISデータをWebGISにレイヤとして追加する処理例
L.GeoJson(GeoJSONデータオブジェクト名,
{
onEachFeature: function onEachFeature(
feature,
layer
){
if(feature.properties && feature.properties.popupContent){
layer.bindPopup(feature.properties.popupContent);
}
}
}
).addTo(WebGISオブジェクト名);
ソースコード7 GeoJSONのGISデータをWebGISにレイヤとして追加する処理の構造
GeoJSONのGISデータをWebGISオブジェクトにレイヤとして追加する処理は、ソースコード6のように行い、この構造を読み取るとソースコード7のようになる。
L.GeoJson()は、GeoJSONのGISデータをレイヤにする処理である。L.GeoJson()の(～)内にレイヤにするGeoJSONデータのオブジェクト名を指定する。GeoJSONデータのオブジェクト名は、図7の緑色の部分のように名前が対応しなければならない。
ソースコード6とソースコード7の緑色の部分の EachFeature は、GISデータ1つ1つについて、その後の処理を行うという意味である。ソースコード6では、if構文を用いて、もしも、GISデータの properties に popupContent があるならば、その popupContent に書かれている内容をWebGIS上にポップアップできるようにするという意味の処理が書かれている。 bindPopup がポップアップをするための具体的な処理である。
最後に、 addTo() を利用して、作成したGeoJSONのレイヤをWebGISオブジェクトに追加する。このようにして、WebGISにGeoJSONを利用したGISデータを追加することができた。
3点以上の頂点を用いた詳細なラインデータの作成
ソースコード2の例では、2点を結んだだけの単純なラインデータを扱っていたが、実際は、より多数の頂点を用いて、複雑な形状を持ったラインデータを扱うことが多い。複雑すぎると、扱うことが困難になるため、東京駅から大手町駅までの道のりを示すという名目で、頂点数が多くなりすぎないラインデータを作成する。なお、東京駅と大手町駅の道のりは実際は他にも地下を利用する等の効率的な道のりが存在するが、あくまで学習のために作成する事例として受け止めてもらいたい。
まず、ラインデータを作成する上で重要となる頂点について地図を見ながら考える。地図上で、頂点となるべき要素は何かを考える。 地物 が頂点になるような場合はわかりやすく、頂点となる 地物 を選択していけば良い。しかし、ラインデータの頂点が 地物 であるとは必ずしも限らない。その場合は、何を基準に頂点を設定する必要があるのか、その要素を地図上からよく読み取ることが重要となる。
今回は、東京駅から大手町駅の道のりを例として扱うため、道のりを線として捉えた場合、頂点となる地点はどのような要素であるかをよく考える。この例では、道路をなぞるというよりは、道路上で人間が方向転換する地点を頂点として、線を引いていくことになる。よって、まずは道路上で人間が方向転換する地点を地図上からピックアップする。その頂点をポイントデータとして地図上に追加した地図の例を以下に示した。ソースコードで示すと、ソースコード8のようになる。
ソースコード8 東京駅から大手町駅までの道のりの人間が方向転換する地点を示したWebGIS
ソースコード8のように各頂点を設定することができる。この頂点を用いて、ラインデータを作成していく。どのような順番に繋げば良いかを考えて、図8のようにラインデータに各頂点を入力する。
図8 各頂点の座標からラインデータを作成する概念
図8のように coordinates の部分に
図8で作成したラインデータを利用して、WebGISに追加した例をソースコード9として、以下に示した。
ソースコード9 東京駅から大手町駅までの道のりのラインデータを追加したWebGIS
このようにラインデータの特徴を踏まえて、各頂点を適切に設定することによって、より詳細で複雑なラインデータを作成することも可能である。
複数のラインデータの追加
ここまでの内容で、GeoJSONを用いたラインデータを1つ追加する処理を作成した。GISデータは1つだけではなく、複数追加することも可能であるため、ここでは、複数のラインデータを追加する方法を紹介する。複数のラインデータを追加した例は、ソースコード1である。再度ソースコード1を以下に示す。
ソースコード1 複数のラインデータを追加したWebGIS
ソースコード1は、ソースコード9(1つの3点以上の頂点を用いたラインデータを追加したWebGIS)にもう1つラインデータを加えたものである。差異がわかりやすいように、以下のソースコード10とソースコード11にGeoJSONの部分を示す。
{
“type”: “Feature”,
“properties”: {
“popupContent”: “<p>p>東京駅から大手町駅までの道のりです。</p>”
},
“geometry”: {
“type”: “LineString”,
“coordinates”:
[139.7659, 35.6814],
[139.7648, 35.6817],
[139.7651, 35.6828],
[139.7652, 35.6830],
[139.7658, 35.6846]
}
}
ソースコード10 ソースコード9(1つの3点以上の頂点を用いたラインデータを追加したWebGIS)のラインデータ部分
{
“type”: “Feature”,
“properties”: {
“popupContent”: “<p>p>東京駅から大手町駅までの道のりです。</p>”
},
“geometry”: {
“type”: “LineString”,
“coordinates”:
[139.7659, 35.6814],
[139.7648, 35.6817],
[139.7651, 35.6828],
[139.7652, 35.6830],
[139.7658, 35.6846]
}
},{
“type”: “Feature”,
“properties”: {
“popupContent”: “<p>東京駅から二重橋前駅までの道のりです。</p>”
},
“geometry”: {
“type”: “LineString”,
“coordinates”:
[139.7659, 35.6814],
[139.7658, 35.6811],
[139.7647, 35.68135],
[139.7644, 35.6814],
[139.7623, 35.68185],
[139.7620, 35.6809],
[139.76195, 35.6808],
[139.76175, 35.6803]
}
}
ソースコード11 ソースコード1(複数のラインデータを追加したWebGIS)のラインデータ部分
このように、ラインデータの部分を
ラインデータの作成方法
本講の最後にラインデータの作成方法について述べて終わる。作成したいラインデータの各頂点の座標を調べて、それを入力すれば、GeoJSONの利案データを作成することができる。しかし、頂点数が増えてくると、この作業は非常に大変な作業となる。本格的にGISデータを作成するためには、 ArcGIS や QGIS などの専門的なアプリケーションが必要になるだろう。ラインデータを作成する方法は多くはないが、以下の方法で、それほど本格的ではないものの、ラインデータを作成することができる。
位置座標確認マップを利用する方法
筆者が作成した位置座標確認マップを利用すれば、位置座標は簡単に調べることができる。これを用いて、各頂点の位置座標を入れれば、ラインデータを作成することができる。
地理院地図の作図機能を使う方法
地理院地図には、作図機能があり、そこで作図したGISデータは、GeoJSONとして保存することができる。これを用いれば、Leafletを用いて開発するWebGISにGeoJSONを用いたGISデータを追加することができる。以下の例では、ポイントデータを扱っているが、同じ方法でラインデータを作成することも可能である。
⇒地理院地図の作図機能を用いたGeoJSONデータの作成方法
本講のまとめ
このようにして、Leafletを用いたWebGISにGISデータとしてラインデータを追加した。ラインデータは2点以上の頂点を結んだ線状のGISデータである。道路や線路、河川など地図を作成する上では、非常に重要な地物を扱うことが多い。また、ポリゴンデータは3点以上の頂点を結んで囲まれる多角形のGISデータであるため、ラインデータを十分に理解することが、ポリゴンデータを理解する上で必要なことになってくるだろう。
よろしければ、アンケートにご協力ください。
本教材に掲載する製品名は、一般に各開発メーカーの商標、または登録商標です。