OpenLayersを使ってみる。[Chapter 58]

機能追加について

Adding interactivity

Web Map Applicationの機能追加 code

今回も、GooglemapをBase layerとして使用するので、

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

でGooglemaps ver.3のscriptを読み込みます。

codeでまずは、map objectを作成します。

//Create a map with an empty array of controls
map = new OpenLayers.Map('map_element');
 
//Create a base layer
// Googlemaps
var google_map = new OpenLayers.Layer.Google(
	'Google Layer',
	{}
);
map.addLayer(google_map);

google_mapをbase layerとして作成します。

次に、vector layerを追加します。

//Add vector layer
vector_layer = new OpenLayers.Layer.Vector('Flickr Data', {
	projection : new OpenLayers.Projection('EPSG:4326'),
	protocol : new OpenLayers.Protocol.HTTP({
		url : 'flickr_data.kml',
		format : new OpenLayers.Format.KML({
			extractAttributes : true,
			extractStyles : true
		})
	}),
	strategies : [new OpenLayers.Strategy.Fixed(), new OpenLayers.Strategy.Cluster()]
});
map.addLayer(vector_layer);

protocol : new OpenLayers.Protocol.HTTP(…)でkmlファイルを飛び出して、formatでkmlを。
protocolの内部で、KML classからのformar objectをセット・アップし、それぞれのイメージに関連したattributeにアクセスすることができるように、extractAttributes : trueとします。
最後に、strategies : […]でFixed()とCluster()を設定します。

次に、vector_styleを追加して、

//Let's style the features
//Create a style object to be used by a StyleMap object
var vector_style = new OpenLayers.Style({
	'fillColor' : '#669933',
	'fillOpacity' : .8,
	'fontColor' : '#f0f0f0',
	'fontFamily' : 'arial, sans-serif',
	'fontSize' : '.9em',
	'fontWeight' : 'bold',
	'label' : '${num_points}',
	'pointRadius' : '${point_radius}',
	'strokeColor' : '#aaee77',
	'strokeWidth' : 3
},
//Second parameter contains a context parameter
{
	context : {
		num_points : function(feature) {
			return feature.attributes.count;
		},
		point_radius : function(feature) {
			return 9 + (feature.attributes.count)
		}
	}
});
 
var vector_style_select = new OpenLayers.Style({
	'fillColor' : '#cdcdcd',
	'fillOpacity' : .9,
	'fontColor' : '#232323',
	'strokeColor' : '#ffffff'
})

のようにvector_style_selectのstyleを設定します。

次に、vector_style_mapを

//Create a style map object and set the 'default' intent to the
var vector_style_map = new OpenLayers.StyleMap({
	'default' : vector_style,
	'select' : vector_style_select
});
 
//Add the style map to the vector layer
vector_layer.styleMap = vector_style_map;

select時とunselect時のvector_layer.styleMapのstyleを作成します。

Controlを下記のように追加して、

//Add a select feature control
var select_feature_control = new OpenLayers.Control.SelectFeature(vector_layer, {
	hover : true
})
map.addControl(select_feature_control);
select_feature_control.activate();

controlをactiveにします。

次に、Feature select時とunselect時について、

//Functions to call for the select feature control
function on_select_feature(event) {
	//Store a reference to the element
	var info_div = document.getElementById('photo_info_wrapper');
 
	//Clear out the div
	info_div.innerHTML = '';
 
	//Store the clusters
	var cluster = event.feature.cluster;
 
	//Loop through the cluster features
	for (var i = 0; i < cluster.length; i++) {
		//Update the div with the info of the photos
		info_div.innerHTML += "<strong>" + cluster[i].attributes.name + "</strong><br />" + "<img src='" + cluster[i].style.externalGraphic + "' />" + cluster[i].attributes.Snippet + "<br /><hr />";
	}
}
 
//on unselect function
function on_unselect_feature(event) {
	//Store a reference to the element
	var info_div = document.getElementById('photo_info_wrapper');
 
	//Clear out the div
	info_div.innerHTML = '';
}

functionを定義します。
内容は、feature selectのmouse over時のinfo_div.innerHTMLにhtmlを作成します。
Unselect時には、info_div.innerHTML = ''となります。

そして最後に、eventの登録を

vector_layer.events.register('featureselected', this, on_select_feature);
vector_layer.events.register('featureunselected', this, on_unselect_feature);

のように、feature select時とunselect時を登録します。
保存後、FireFoxを立ち上げて、http://localhost/openlayers/chapter11/chapter11_ex1.htmlと入力すると、

ようにkml fileのpoint dataが読み込まれてmapに表示されます。
Map上のcluster pointにmouse overすると、

のようにkml fileのattributeの内容がmapの下に表示されます。
他のcluster pointにmouse overしても

のようにkml fileのattributeの内容がmapの下に表示されます。

今回のまとめ