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

Attribute replacement

Attribute replacementを使ったexample code

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

        //Create a map with an empty array of controls
        map = new OpenLayers.Map('map_element');
 
        //Create a base layer
        var wms_layer = new OpenLayers.Layer.WMS(
            'OpenLayers WMS',
            'http://vmap0.tiles.osgeo.org/wms/vmap0',
            {layers: 'basic'},
            {}
        );
        map.addLayer(wms_layer);

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

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

//Add vector layer
vector_layer = new OpenLayers.Layer.Vector('Basic Vector Layer');
map.addLayer(vector_layer);
 
//Create some points
for (var i = 0; i < 10; i++) {
	vector_layer.addFeatures([
		new OpenLayers.Feature.Vector(
			new OpenLayers.Geometry.Point(
				(Math.floor(Math.random() * 360) - 180),
				(Math.floor(Math.random() * 180) - 90)), {
		//Attributes go here
		size : 5 + (Math.floor(Math.random() * 20)),
		label : 'F' + i,
		strokeWidth : (Math.floor(Math.random() * 10))
	})]);
}

のように vector_layerを定義します。
Pointの座標はrandamに10カ所を作成するようにして、addFeaturesでvector_layerに追加します。
Attributeにsize、label、strokeWidthを設定します。

そして、StyleMap objectを

//Create a style object to be used by a StyleMap object
var vector_style = new OpenLayers.Style({
	'cursor' : 'pointer',
	'fillColor' : '#787878',
	'fillOpacity' : .8,
	'fontColor' : '#343434',
	'label' : '${label}',
	'pointRadius' : '${size}',
	'strokeColor' : '#232323',
	'strokeDashstyle' : 'solid',
	'strokeWidth' : '${strokeWidth}'
});
 
//create a select style
var vector_style_select = new OpenLayers.Style({
	'fillColor' : '#ffffff',
	'fillOpacity' : .9,
	'label' : 'X',
	'pointRadius' : 16,
	'strokeColor' : '#343434',
	'strokeDashstyle' : 'solid',
	'strokeWidth' : 4
});

のようにvector_style(未選択状態)とvector_style_select(選択状態)を定義します。
defualt状態の'label' : '${label}'、'pointRadius' : '${size}'、'strokeWidth' : '${strokeWidth}'をattributeの値に置き換えます。

そして、vector_style_mapに、

//Create a style map object and set the 'default' intent to the
//  style object we just created
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;

StyleMapを作成します。ここで、'default': vector_style、'select' : vector_style_selectとしてstyleMapとします。
そして、vector layerをvector_layer.styleMapとして作成します。

最後に、controlを追加して、activateします。

//Add a select feature control
var select_feature_control = new OpenLayers.Control.SelectFeature(vector_layer);
map.addControl(select_feature_control);
 
//Activate the control
select_feature_control.activate();

保存後、FireFoxを立ち上げて、http://localhost/openlayers/chapter10/chapter10_ex3_attriute_replacement.htmlと入力すると、

ように'default'のStyleMapで定義されたvactor layerが追加されて、point dataが読み込まれてmapに表示されます。attibuteがcircle内に表示されます。

point featureをselectすると、

ように'select'のStyleMapで定義されたcircle featureに変わります。

今回のまとめ