#contents
*Vector Layer [#v4294ae3]
-Raster vs Vector
|Raster Layer|サーバ側で作られた地図画像を表示する|
|Vector Layer|端点の情報を元に、クライアントサイド(Javascript)で図形を作成して表示する|
-データ形式
--http://openlayers.org/en/master/apidoc/ol.format.JSONFeature.html
|EsriJSON|ESRI社 (GIS業界の親玉) の REST API で用いられる形式|
|GeoJSON |一般的に用いられる、地理空間情報を格納するJSON形式|
|TopoJSON|GeoJSON を位相幾何学(トポロジー) を使って、形を保ったままデータ量を少なくした形式。1/10 くらいになる|
--http://openlayers.org/en/master/apidoc/ol.format.TextFeature.html
|IGC|スポーツグライディングで使われる形式|
|Polyline|多角形|
|WKT|Well Known Text形式、WKT のバイナリ形式 (WKB) は、PostGIS や DB2 などで地理空間情報を保存する際の形式|
--http://openlayers.org/en/master/apidoc/ol.format.XMLFeature.html
|GML,GML2,GML3|GML 3.2.1=ISO 19136=JIS X 7136, [[国土地理院基盤地図情報>http://www.gsi.go.jp/kiban/]] のデータ形式|
|GPX|GPS のログによく使われる形式。ウェイポイントと軌跡を表現しやすい|
|KML|Google のサービスで使われるデータ形式。Keyhole は、後に Google Earth となるアプリを開発していた会社。2004 年に Google と合併|
|OSMXML|Open Street Map で使われるデータ形式|
|WFS|WMS (Mapserver) のベクター情報版。Mapserver も WFS をしゃべれる。GML3 もしゃべれるので WFS の出番は少ないかも|
|WMSGetFeatureInfo|WMS のレイヤ情報|
-図形
--Point
--Multi Point
--Line String
--Multi Line String
--Polygon
--Multi Polygon (飛び地の有るポリゴン)
*GeoJSON 形式のデータを Vector Layer に描画する [#c4a2c297]
-USGS から、2010年〜2015年 のマグニチュード 6 以上の地震の位置(Point)を GeoJSON 形式でダウンロード&br;
http://earthquake.usgs.gov/earthquakes/search/ ⇒ js/earthquake.geojson
-MapQuest の衛星写真 (Raster) の上に、Vector Layer を置いて、そこに地震発生箇所を描画する&br;
-マウスクリックで GeoJSON の付帯情報を表示する。&br;「クリック位置の緯度,経度 ⇒ クリック位置のピクセル座標 ⇒ そのピクセルにある図形の付帯情報」の順で GeoJSON の付帯情報を取得する&br;
#iframe(/OL3Exam/10_Earthquake.html,style=width:600px;height:350px;border:dotted 1px);
&code(html,https://github.com/kagyuu/OL3Exam/blob/master/10_Earthquake.html);
*REST API から今描画に必要なデータを取得する [#cb4c7af5]
-固定データの場合には ol.source.Vector に format と url を指定すればよかった
-必要箇所を動的に取得するには ol.source.Vector に loader と strategy を指定する
--loader : function(extent, resolution, projection)
---引数 extent に、現在表示している地図に必要な領域が EPSG:3857 で格納されている&br;
たとえば
[-60112525.02836773, -2665308.711046496, 60112525.02836773, 13106401.957203632]
これをGETパラメータに乗っけて GeoJSON を返す REST API を呼び出す
http://...../cgi-bin/getMap?bbox=-60112525.02836773, -2665308.711046496, 60112525.02836773, 13106401.957203632&callback=
とか
--strategy
---http://openlayers.org/en/v3.8.1/apidoc/ol.loadingstrategy.html
---all (デフォルト) 地図全体のデータを最初に取得する
---bbox 描画範囲のデータを取得する
---tile 描画するタイル領域のデータを取得する (描画範囲より若干広い)
---strategy の設定によって loader の第一引数 extent の範囲が変わる。逆に言うと strategy を変えても loader の中身は変更しなくていい
-&color(gray){ol.source.Vector に format と url を指定した場合、内部的には [[ol.featureloader.xhr>http://openlayers.org/en/v3.8.1/apidoc/ol.featureloader.html]] が使われる};
-下のサンプルは Natural Earth から、精度 110m の地図をダウンロードしてきて、GeoJSON 形式に変換して衛星写真の上に配置。マウスクリックで国名が表示される&br;
cf. [[HTML D3.js Globe]] &br;
#iframe(/OL3Exam/11_Countries.html,style=width:600px;height:350px;border:dotted 1px);
&code(html,https://github.com/kagyuu/OL3Exam/blob/master/11_Countries.html);
*いろいろな図形を地図に描画する [#hdf27a3b]
-new ol.source.Vector の features に図形を指定する
#graphviz{{{
digraph {
node [shape = box, fontsize="12px", fontname="IPAPGothic"];
edge [fontsize="10px", fontname="IPAPGothic", arrowhead = odiamond];
"ol.layer.Vector" -> map [label = layers];
"ol.source.Vector" -> "ol.layer.Vector" [label = source];
"ol.Feature" -> "ol.source.Vector" [label = feature]
"ol.geom.Circle" -> "ol.Feature" [label = geometry];
"ol.geom.LineString" -> "ol.Feature" [label = geometry];
"ol.geom.Point" -> "ol.Feature" [label = geometry];
"ol.geom.Polygon" -> "ol.Feature" [label = geometry];
}
}}}
-図形には次を指定できる http://openlayers.org/en/v3.8.1/apidoc/ol.geom.html
--Circle
--Geometry
--GeometryCollection
--LinearRing
--LineString
--MultiLineString
--MultiPoint
--MultiPolygon
--Point
--Polygon
--SimpleGeometry
#graphviz{{{
digraph class_diagram {
rankdir = TB
node [shape=record, style=filled, color=FireBrick, fillcolor=FloralWhite, fontsize="10px", fontname="IPAGothic"]
edge [dir=back, color=FireBrick, arrowtail=empty, fontsize="10px", fontname="IPAGothic"]
Object [label = "{ol.Object}"]
Geometry [label = "{ol.geom.Geometry||+getClosestPoint(point)}"]
GeometryCollection [label = "{ol.geom.GeometryCollection||+getGeometries()\n+setGeometries(geometries)}"]
SimpleGeometry [label = "{ol.geom.SimpleGeometry||+getLayout()}"]
Circle [label = "{ol.geom.Circle|center\nradius\nlayout|}"]
LinearRing [label = "{ol.geom.LinearRing|coordinates\nlayout|}"]
LinearString [label = "{ol.geom.LineString|coordinates\nlayout|}"]
MultiLineString [label = "{ol.geom.MultiLineString|[coordinates]\nlayout|}"]
MultiPoint [label = "{ol.geom.MultiPoint|coordinates\nlayout|+getPoints()\n+getPoint(index)}"]
Point [label = "{ol.geom.Point|coordinate\nlayout|}"]
MultiPolygon [label = "{ol.geom.MultiPolygon|[[coordinates]]\nlayout|+getInteriorPoints()\n+getPolygons()\n+getPloygon(index)}"]
Polygon [label = "{ol.geom.Polygon|[coordinates]\nlayout|+getInteriorPoint()}"]
Object -> Geometry
Geometry -> GeometryCollection
Geometry -> SimpleGeometry
SimpleGeometry -> Circle
SimpleGeometry -> LinearRing
SimpleGeometry -> LinearString
SimpleGeometry -> MultiLineString
SimpleGeometry -> MultiPoint
SimpleGeometry -> Point
SimpleGeometry -> MultiPolygon
SimpleGeometry -> Polygon
GeometryCollection -> Geometry [arrowtail=odiamond]
MultiPoint -> Point [arrowtail=odiamond]
MultiPolygon -> Polygon [arrowtail=odiamond]
}
}}}
----
#iframe(/OL3Exam/12_Polygon.html,style=width:600px;height:350px;border:dotted 1px);
&code(html,https://github.com/kagyuu/OL3Exam/blob/master/12_Polygon.html);
*ol.source.GeoJSON は、3.5 で廃止 [#x02c9c37]
-3.4 までは、ol.source.Vector を継承した ol.source.GeoJSON で Vector Layer を作成していた
-3.5 からは、ol.source.Vector に描画アルゴリズム ol.format.GeoJSON を指定する
-https://github.com/openlayers/ol3/pull/3481
----
[[GIS]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
