OpenLayersのExampleリスト

2013/8/20現在、http://openlayers.org/dev/examples/で公開されているOpenLayersの例の概要を以下にまとめる。全て訳してはおらず、専門用語もあやふやな部分があるので、誤りや不正確な記述があってもご容赦を。ご指摘いただければ幸いです。

(2013/8/22更新。208個中の40個を記載。)

簡単な地図表示

All Overlays with Google and OSM

GoogleとOSM(Open Street Map)をレイヤーとして重ねる。

最初のレイヤーに最初に表示するレイヤーを追加しなくてはならない。そのためにMapのallOverlaysプロパティを使う。

http://openlayers.org/dev/examples/all-overlays-google.html

OpenLayers Overlays Only Example

Overlaysのみの地図の例。

様々な描画やレイヤータイプ、独立した地図の表示などをしたい場合、そのマップのallOverlaysプロパティをtrueにする。

http://openlayers.org/dev/examples/all-overlays.html

Bing Tiles with a Subset of Resolutions Sample

Bingの地図チップを得るサンプル。

http://openlayers.org/dev/examples/bing-tiles-restrictedzoom.html

Basic Bing Tiles Example

Bingのタイルへの直接アクセス例。

http://openlayers.org/dev/examples/bing-tiles.html

Bing Example

Bingの使い方

http://openlayers.org/dev/examples/bing.html

携帯端末向け

Accelerometer

加速度センサーテスト。PCのWebブラウザーでは動作しない。

http://openlayers.org/dev/examples/accelerometer.html

見た目の変更

Custom and accessible panel

CSSでスタイル定義した操作パネルの作例。

• ボタンはHTMLボタンとして動作。TABキーでフォーカス移動。ENTERキーでボタン動作。
• ボタンはテキストとタイトルを表示。
• FireFoxのNo Color extensionなどでページからColors(印/アイコン的なもの?)を削除しても、ボタンは表示され続け、キーボード操作も可能。

パネルはdivのボタンとして作成される。この例ではcreateControlMarkupパネル関数をオーバーライドして、より操作が可能なボタンにしている。

IE8では、ボタンが押されると1ピクセルずれる。これはIE8のバグである。

http://openlayers.org/dev/examples/accessible-panel.html

AnchorPermalink Example

国名を重ねて表示する例。普通に地図を生成して、以下を実行している。

map.addControl(new OpenLayers.Control.Permalink({anchor: true}));

http://openlayers.org/dev/examples/anchor-permalink.html#zoom=1&lat=0&lon=0&layers=B 

Attribution Example

レイヤーの表示、非表示を設定するウィンドウの表示方法。

http://openlayers.org/dev/examples/attribution.html

Client Zoom

地図が対応していないサイズにズームインした時に、クライアント領域のドットを拡大して表示する機能。

http://openlayers.org/dev/examples/clientzoom.html

Map Controls Example

ズーム、パン、レイヤー変更、オーバービューマップ、Permalinkを表示するサンプル。

http://openlayers.org/dev/examples/controls.html

Custom Style Example

OpenLayers上のコントロールにCSSスタイルを適用する方法の例。

http://openlayers.org/dev/examples/custom-style.html

操作周り

An accessible click control implementation

キーボード操作。カーソルキーでスクロール。iキーでモード切替。モードを切り替えると、ターゲットが表示されて、カーソルでターゲット移動。Enterを押すと、ターゲットの緯度経度が表示される。iキーでスクロールモードに戻る。

http://openlayers.org/dev/examples/accessible-click-control.html

Accessible Example

キーボード操作をAccessキーに紐付けする例。地図にフォーカスしてから、以下のキーで操作できる。

• +(ズームイン)
• -(ズームアウト)
• カーソルキー(スクロール) 

操作のリンクをクリックするか、tabキーでフォーカスを移動してEnterキーでも操作できる。

http://openlayers.org/dev/examples/accessible.html

Map.pan To Example

地図の自動スクロールサンプル。クリックした場所が地図の中心になるようにスムーズにスクロールさせている。

http://openlayers.org/dev/examples/animated_panning.html

Click Handler Example

Clickハンドラ―の使い方例。ダブルクリックやドラッグなどを検出できるようにする。ウィンドウ右のボタンを押してONにすると、それぞれのイベントが有効になって、クリックやダブルクリック、ドラッグした場所の緯度経度を出力する。

http://openlayers.org/dev/examples/click-handler.html

Click Event Example

シングルクリックを検出し、場所の緯度経度を返す例。ダブルクリックは認識しない。

http://openlayers.org/dev/examples/click.html

図形描画・操作

Vector Behavior Example

Fixed strategy,HTTP protocol , GML Formatによるベクターレイヤー(図形を描画)のサンプル。

http://openlayers.org/dev/examples/behavior-fixed-http-gml.html

Boxes Example Vector
Boxes Example

クリック可能な四角の描画方法。
http://openlayers.org/dev/examples/boxes-vector.html (塗りつぶしの四角形)

http://openlayers.org/dev/examples/boxes.html (四角形の線)

Feature Hit Detection with Canvas

キャンバスによる当たり判定。形状をクリックを判定する。

http://openlayers.org/dev/examples/canvas-hit-detection.html

Canvas Inspector

Canvasの色情報を読み取るサンプル。

http://openlayers.org/dev/examples/canvas-inspector.html

Canvas Renderer Example

Canvasを使ってベクターレイヤーに描画する例。

http://openlayers.org/dev/examples/canvas.html

Custom Control Example

Shiftを押しながらマウスをドラッグすると、マップ上に矩形を描き、ドラッグを終了すると、左上と右下の緯度経度を表示する。

http://openlayers.org/dev/examples/custom-control.html

 

ArcGIS関連

ArcGIS Server 9.3 Rest API Example

ArcGIS Server 9.3をOpen Layersから利用する例。

http://openlayers.org/dev/examples/arcgis93rest.html

OpenLayers ArcGIS Cache Example(MapServer Access / Direct Access / Autoconfigure with JSONP)

ArcGISのMapServerへのアクセスの例。

http://openlayers.org/dev/examples/arcgiscache_ags.html

http://openlayers.org/dev/examples/arcgiscache_direct.html

http://openlayers.org/dev/examples/arcgiscache_jsonp.html

ArcIMS Thematic Example / ArcIMS Example

インターネット・イントラネットを用いた公開型WebGISを構築するためのソフトウェアであるArcIMSで作成したレイヤーを表示する方法。

http://openlayers.org/dev/examples/arcims-thematic.html

http://openlayers.org/dev/examples/arcims.html

パフォーマンスの向上

Buffer Example

OpenLayers.Layer.Gridを継承した様々なレイヤーのためのバッファレイヤーオプションを使うためのサンプル。
Bufferプロパティで、表示地図の外側にいくつのタイルを用意するかを設定できる。初期設定は0。増やすと、スクロールさせた場合に地図が読み込まれるまで白のままになり辛い。
http://openlayers.org/dev/examples/buffer.html

Cache Read Example / Cache Write Example

地図のタイルをブラウザのLocal Storageに保存・読み込むサンプル。

http://openlayers.org/dev/examples/cache-read.html

http://openlayers.org/dev/examples/cache-write.html

その他

null(bootstrap.html)

Map QuestのBootstrapの使い方。

http://openlayers.org/dev/examples/bootstrap.html

Browser Detection

ブラウザの対応機能のチェック。

http://openlayers.org/dev/examples/browser.html

Reading Features From CartoDB using GeoJSON

CartoDBは、クラウドで提供されるオープンソースの空間情報DBである。形状、KML、OSM、CSVなどのデータを登録して、視覚化できる。CartoDBはPostGIS2.0を利用しているので、PostGISの機能を利用できる。CartoDBは2つのAPIを提供する。1つはgenerate mapsで、タイルを双方向で生成する。もう一つはSQL APIで、ベクターデータをGeoJSONで取得する。この例では、コスタリカの全ての保護区域を公的テーブルから取得している。

http://openlayers.org/dev/examples/cartodb-geojson.html

CQL Filter Example

Common Query Languageによるフィルタ例。STATE_ABBRは州を表す。

http://openlayers.org/dev/examples/cql-format.html

Script Protocol With XML

XMLによるスクリプト。YQLは、OpenLayersでサポートする様々なXMLフォーマットを変換するスクリプトプロトコルである。
YQLはXMLに関して、JSONPでコールバックでラッピングすることができる。これにより、Yahooのサーバーを、様々な機能を読み込むためのプロキシ―として利用することが出来る。
このファイルではGPXファイルを利用しているが、同様にしてKMLなどの異なるフォーマットを利用することも出来る。
http://openlayers.org/dev/examples/cross-origin-xml.html

Script Protocol

動作がよくわからず。

http://openlayers.org/dev/examples/cross-origin.html

Debug Example

開発者が最も利用しているであろうFirefoxのデバッグ用プラグインfirebugの利用例。
<script src="../lib/Firebug/firebug.js"></script>
起動ページにdebug=”true”を設定すると、Firebug Liteのコンソールページが出力されるらしい。
http://openlayers.org/dev/examples/debug.html