おしらせ

OpenLayers3デモ

2014年12月18日

OpenLayers が v3.0.0 にバージョンアップしたため、機能検証も兼ねてデモページを作成しました。

ol3_logo OpenLayers3デモページ

OpenLayers3 OpenLayers3デモ

OpenLayers 3 の公式情報については、以下のサイトから参照可能です。


デモページの機能

ol3_tiled-layers

今回作成したデモページでは、地理院地図をベースとし、主題情報に公共施設のマーカーを重ね合わせ表示しました。
また、以下の基本的な地図操作機能を実装しています。(今後も随時、追加予定)

  • 地図表示
    ベースマップ(基図):地理院地図(各種タイルデータ)、Bing Maps
    オーバーレイ(主題):板橋区各種施設データ ※板橋区のオープンデータ(地理情報)を使用しています
  • 【+】拡大表示
  • 【-】縮小表示
  • 【E】全体表示(指定範囲表示)
  • 【L】レイヤ制御(表示 ON/OFF)
  • 【i】基図情報表示
  • 主題データ属性情報表示
    ポップアップ表示(マウスクリック)
    名称表示(マウス位置)
  • 地図上の画面情報表示
    スケールバー
    座標情報(マウス位置)
    Zoomレベル

OpenLayers3の特徴(基本機能)

ol3_vector-layers

現時点では基本機能のみとなりますが、実際にデモページを作成してみて、OpenLayers3には従来のバージョンと比較して以下の特徴が感じられました。

  • 利点
    地図の操作性が向上(表示速度、表現など)
    モバイル環境(スマホなど)に対応しやすい
    カスタマイズ性に優れる(各種コントロールの細部表現など)
  • 欠点
    Google Maps表示の制約が厳しい
    古いブラウザに非対応(IE8など)
    ※ ブラウザ対応状況(参考):Canvas (basic support) 

また、デモ作成時点では、v2に存在した「OverView」「LayerSwitcher」のコントロールが使用できませんでした。
情報は少しずつ増えてきているので、今後の対応に期待したいです。


OpenLayers3の応用

ol3_popup

今後は OpenLayers3を使用して、特にニーズが高いと思われる以下の機能について、デモページを展開する予定です。


Google Mapsの表示
Google Mapsの表示
// Google Mapsオブジェクト
var gmap = new google.maps.Map(document.getElementById('gmap'), {
	disableDefaultUI: true
	,keyboardShortcuts: false
	,draggable: false
	,disableDoubleClickZoom: true
	,scrollwheel: false
	,streetViewControl: false
});
// Google Mapsの初期表示設定
gmap.setCenter(new google.maps.LatLng(defaultCenter[1], defaultCenter[0]));
gmap.setZoom(defaultZoom);

// View設定(Google Mapsと連動)
view.on('change:center', function() {
	var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
	gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
});
view.on('change:resolution', function() {
	gmap.setZoom(view.getZoom());
});

OpenLayers 3 Examples(Google Maps integration example)を参考に作成しました。
Google の制約が厳しくなったためか、従来(v2)のようにタイルデータを直接制御することができません。


画像ビューアとしての使い方
2015年カレンダー

// カレンダー(世界地図)タイルデータ
layers[0] = new ol.layer.Tile({source: new ol.source.XYZ({
	attributions: []
	,url: "tms/{z}/{x}/{-y}.png"
	,projection: "EPSG:3857"
	})
});












当社の2015年カレンダーのタイルデータを作成し、OpenLayers3で表示しました。
表示範囲・Zoomレベルを制御することで、拡大・縮小・スクロールが可能な画像ビューアとして使用することができます。


Bing Maps の表示
ol3_image04

// Bing Maps(Road)
layers[0] = new ol.layer.Tile({source: new ol.source.BingMaps({
	key: BINGMAPS_KEY
	,imagerySet:['Road']
	})
});













Google Maps の使い勝手が良くなかったこともあり、見た目にも似ている Bing Maps の表示処理をデモに組み込んでみました。
こちらの方が組み込みも容易で、動作もスムーズです。


スマホ向けの機能(検討中)