OpenLayers 3 が面白そう

Webマップシステムのフレームワークとして最もポピュラーなのは、言わずと知れた Google Maps ということになるかと思うが、オープンなフレームワークとしては OpenLayers が知られている．OpenLayers　についてはこれまで何度か取り上げてきたが、OpenLayersがV3になり大分安定してきたようなので、そろそろOpenLayers 3に取り組んでみようと思う．

OpenLayers3のサイトに GPX, KML などのファイルを地図上にドラッグ＆ドロップするだけで地図上に重ねて表示するOL3 ドラッグ＆ドラッグサンプルが載っていたので、このコードをちょっとだけ弄ってベースマップを国土地理院の地図に置き換えたサンプルを置いてみた．

これまで、サーバサイドでPHPなどでXMLのパーシングを行ってクライアントサイドのJavascriptへデータを渡していたが、OpenLayers 3 ではクライアントサイドで XMLデータを直接ハンドリングした方が簡単かつ冗長なJavascriptコードを渡さなくて済むのでWordpressのプラグインなどの制作が大分楽になりそうだ．

OpenLayers 3 の機能が大分充実してきたようなので、Google、Yahoo! Japan, Bing Maps などのプロプライエタリなフレームワークからそろそろ脱却できるかもしれない．OpenLayers 3 のドキュメントは相変わらず説明不足なので、使いこなすにはソースコードレベルまで辿って、内容を把握しなければならないのがつらいところだ．

サンプルコード

var defaultStyle = {
  'Point': [new ol.style.Style({
    image: new ol.style.Circle({
      fill: new ol.style.Fill({
        color: 'rgba(255,255,0,0.5)'
      }),
      radius: 5,
      stroke: new ol.style.Stroke({
        color: '#ff0',
        width: 1
      })
    })
  })],
  'LineString': [new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#f00',
      width: 3
    })
  })],
  'Polygon': [new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(0,255,255,0.5)'
    }),
    stroke: new ol.style.Stroke({
      color: '#0ff',
      width: 1
    })
  })],
  'MultiPoint': [new ol.style.Style({
    image: new ol.style.Circle({
      fill: new ol.style.Fill({
        color: 'rgba(255,0,255,0.5)'
      }),
      radius: 5,
      stroke: new ol.style.Stroke({
        color: '#f0f',
        width: 1
      })
    })
  })],
  'MultiLineString': [new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#0f0',
      width: 3
    })
  })],
  'MultiPolygon': [new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(0,0,255,0.5)'
    }),
    stroke: new ol.style.Stroke({
      color: '#00f',
      width: 1
    })
  })]
};

var styleFunction = function(feature, resolution) {
  var featureStyleFunction = feature.getStyleFunction();
  if (featureStyleFunction) {
    return featureStyleFunction.call(feature, resolution);
  } else {
    return defaultStyle[feature.getGeometry().getType()];
  }
};

var dragAndDropInteraction = new ol.interaction.DragAndDrop({
  formatConstructors: [
    ol.format.GPX,
    ol.format.GeoJSON,
    ol.format.IGC,
    ol.format.KML,
    ol.format.TopoJSON
  ]
});

//================================= GSI Map ==========================================
var map = new ol.Map( {
	target: "map",
	renderer: ['canvas', 'dom'],
	layers: [
		new ol.layer.Tile( {
			source: new ol.source.XYZ( {
				attributions: [
					new ol.Attribution( {
						html: "地理院タイル"
					} )
				],
				url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
				projection: "EPSG:3857"
			} )
		} )
	],
	controls: ol.control.defaults( {
		attributionOptions: ( {
			collapsible: false
		} )
	} ),
	view: new ol.View( {
		projection: "EPSG:3857",
		center: ol.proj.transform( [138.7313889, 35.3622222], "EPSG:4326", "EPSG:3857" ),
		maxZoom: 18,
		zoom: 12
	} ),
	interactions: ol.interaction.defaults().extend( [dragAndDropInteraction] )
});
//======================================================================================

dragAndDropInteraction.on( 'addfeatures', function( event ) {

	var vectorSource = new ol.source.Vector( {
		features: event.features
	});
	map.addLayer( new ol.layer.Vector( {
		source: vectorSource,
		style: styleFunction
	}));
	map.getView().fit( 
		vectorSource.getExtent(), /** @type {ol.Size} */ ( map.getSize() ) );
});

var displayFeatureInfo = function( pixel ) {
	var features = [];
	map.forEachFeatureAtPixel( pixel, function( feature, layer ) {
		features.push(feature);
	});
	if ( features.length > 0 ) {
		var info = [];
		var i, ii;
		for ( i = 0, ii = features.length; i < ii; ++i)  {
			info.push(features[i].get('name'));
		}
		document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
	} else {
		document.getElementById('info').innerHTML = ' ';
	}
};

map.on( 'pointermove', function( evt ) {
	if ( evt.dragging ) {
		return;
	}
	var pixel = map.getEventPixel( evt.originalEvent );
	displayFeatureInfo( pixel );
});

map.on( 'click', function( evt ) {
	displayFeatureInfo( evt.pixel );
});