これまで、Webページに地図を表示するためのJavaScriptライブラリとしてOpenLayers 2を利用してきました。しかし、まもなくOpenLayers 3がリリースされる見込みです。そこで、OpenLayersの2と3、さらに別のオープンソース（BSDライセンス）のJavaScriptライブラリLeafletの比較調査をしました。

※OpenLayers 3については、現在公開されている正式版とは仕様が異なる点がありますのでご注意下さい。

比較のための課題として、現在位置を中心にOpenStreetMapをズームレベル18で表示するWebページを、OpenLayers 2、OpenLayers 3、Leafletを用いて作成します。

まずは、OpenLayers 2から。（JavaScriptプログラムのみ示します）

var map = new OpenLayers.Map('mapdiv');
map.addLayer( new OpenLayers.Layer.OSM() );

if( navigator.geolocation ) {
  navigator.geolocation.getCurrentPosition(
    function(pos) {
      var lonLat = new OpenLayers.LonLat( pos.coords.longitude, pos.coords.latitude ).transform(
        new OpenLayers.Projection('EPSG:4326'),
        map.getProjectionObject() );
      map.setCenter(lonLat, 18);
  } );
}

Mapを作り、OpenStreetMapのLayerを追加します。
現在位置の取得には、以前、WordPressプラグインの開発で使用した方法を用いていますが、OpenLayers 2でラッパーも提供されているようです。取得した座標は地図の座標系に合わせて変換し、map.setCenter()で中心座標とズームレベルを設定します。

実際のHTMLによる表示はこちら。

OpenLayers 3では、以下のようになります（ベータ版を使用しているため、今後リリースされる版では仕様が変わる可能性があります）。

var view = new ol.View2D();
var map = new ol.Map({
  target: 'mapdiv',
  view: view,
  layers: [new ol.layer.Tile({
    source: new ol.source.OSM()}
  )]
});

var geoloc = new ol.Geolocation();
geoloc.bindTo('projection', map.getView());
geoloc.setTracking(true);
geoloc.on('change', function() {
  if(geoloc.getPosition() != null){
    view.setCenter(geoloc.getPosition());
    view.setZoom(18);
  }
});

OpenLayers 3のMapは、LayerとViewを持つようになりました。地図のズームや中心座標の指定には、Viewを使用します。
現在位置の取得には、OpenLayers 3のGeolocationを使用します。作成したGeolocationクラスのインスタンスをViewにバインドし、トラッキングを開始し、座標変化のコールバック関数で、ViewのsetCenter()とsetZoom()メソッドを用いて中心座標とズームレベルを設定します。
Viewが追加された分、面倒になりました。

実際のHTMLによる表示はこちら。

Leafletを使用すると以下のようになります。

var map = L.map('mapdiv', {
  layers: [ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
  })]
});

map.locate({setView: true});
map.on('locationfound', function(e) {
  map.setZoom(18);
});

最初の

var map = L.map('mapdiv', {

を見て、newがないことを不審に思うかも知れません。実は、このmapはクラスではなくメソッドなのです。
LeafletのJavaScriptファイルの中では、以下のように定義されています。

L.map = function (id, options) {
  return new L.Map(id, options);
};

OpenStreetMapのLayerを作成するときに、

  layers: [ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'

タイルサーバのURLと帰属（attribution）表示を指定しなければならないのは若干面倒です。
しかし、現在位置の表示はとても簡単です。

map.locate({setView: true});

で、現在位置を取得して中心とすることを指定し、

map.on('locationfound', function(e) {
  map.setZoom(18);
});

現在位置取得のコールバック処理の中でズームするだけです。

実際のHTMLによる表示はこちら。

今回作成したサンプルで結論を出すのは性急ですが、OpenLayers 2に比べてOpenLayers 3は複雑さが増したように思います。一方、LeafletはOpenLayers 2よりもシンプルだと思います。
複雑さ、難解さの順位は以下のようになります。

OpenLayers 3 ＞ OpenLayers 2 ＞ Leaflet

サンプルの作成にあたってネットで情報を検索しましたが、情報の豊富さは以下の順位になります。

OpenLayers 2 ＞ Leaflet ＞ OpenLayers 3

当面は、Leafletを重点的に調査しようと思います。