OpenLayersのVector Layer classについて-1[Chapter 37]

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

OpenLayersのVector Layer rendererについて[Chapter 36] に引き続き、OpenLayersのVector layer classについて基本を学んでいきます。

この章以降は、

  • どのようにvector layerを描いているか?
  • Vector Classとは? → 今回はここ
  • GeometryとFeature classについて
  • Strategy,Protocol,Format classの使い方

について順番に学んでいきます。

OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。

OpenLayers.Layer.Vectorのproperties

まずは、vector classのpropertyについてみていきましょう。
Vectoe classのいくつかは他のclassから継承されたObjectです。

drawn

‹drawn: {Boolean}. Returns true or false depending on whether the features have been drawn or not. You do not set this property when instantiating the vector layer object.

features

features: {Array {OpenLayers.Feature.Vector}}. This is an array of feature objects belonging to the vector layer. We saw this in the earlier example—by accessing this array, we can find out information about all the objects (features) which a vector layer contains. Since this is an array, you can access an individual feature by calling vector_layer.features[X], where X is the index of the desired feature. We'll go much more in depth with how to interact with features later in the chapter.

filter

filter: {OpenLayers.Filter}. By assigning a filter object to a vector layer object, you can (as the name implies) filter out certain data based on the properties supplied to the filter object. This is very useful when you want to display some, but not all, features from a data source. We will go over this property thoroughly in the Filter class section in Chapter 10.

isBaseLayer

isBaseLayer: {Boolean}. Default value is false. Specifies if the layer is a base layer or not. You could use a vector layer as a base layer, having an entirely vector based map instead of relying on a WMS or Google Maps Layers as a base layer.

isFixed

isFixed: {Boolean}. Default value is false. Determines if the vector layer will move around when the map is dragged. This can come in handy if, for instance, you want to place a marker on your map that always stayed in the center of the map (in which case you would set this property to true).

isVector

isVector: {Boolean}. Returns true if the layer is a vector layer. You do not set this property when you instantiate the vector layer. This property is used primarily to check if an already instantiated layer is a vector layer or not. For instance, if you wanted to loop through all the layers on your map and determine if a layer was a vector layer or not, you would likely use this property.

protocol

protocol: {OpenLayers.Protocol}. Specifies a protocol object to use for the vector layer. In the section on strategies, protocols, and formats, we talk about this in much more depth.

renderers

renderers: {Array{String}}. Specifies an array containing strings which contain the renderers to use. Each renderer is tried, in order, and if it is not supported by the browser, the next one is tried. Earlier in the chapter we went over how to use this property.

rendererOptions

rendererOptions: {Object}. The renderer will use an anonymous object consisting of properties. We won't talk any more about renderers in this chapter, but the properties this object can contain are listed in the OpenLayers docs for each renderer class at http://dev.openlayers.org/docs/files/OpenLayers/Renderer-js.html.

reportError

reportError: {Boolean}. Default is true. This property specifies whether or not to report error messages if the renderer fails to load.

selectedFeatures

selectedFeatures: {Array{OpenLayers.Feature.Vector}}. This property contains an array of features the layer contains that are currently selected. Features can be selected by, for instance, clicking on a feature. This property is discussed more in the section on interacting with features.

strategies

strategies: {Array{OpenLayers.Strategy}}. An array of strategy objects. Strategies tell the vector layer how to behave, such as clustering features together. In the section on strategies, protocols, and formats, we talk about this in much more depth.

style

style: {Object}. Contains style information for the vector layer. Using this, we can change the color, size, etc. of features in our vector layer. We talk about this in much more detail in Chapter 10.

styleMap

styleMap: {OpenLayers.StyleMap}. A stylemap object that defines styles the vector layer will use. Chapter 10 covers the Style and StyleMap class in detail.

unrenderedFeatures

unrenderedFeatures: {Object}. This contains an anonymous object of features that failed to render (if any exists). You do not set this property when instantiating the vector layer object.

OpenLayers.Layer.Vector methods

clone()

clone(): Makes a copy of the layer and the features it contains. Returns an {OpenLayers.Layer.Vector} object, which is a copy of the layer.

getDataExtent()

getDataExtent(): This function will return an {OpenLayers.Bounds} object consisting of the max extent that includes all the features of the layer.

refresh(obj)

refresh(obj): Causes the layer to request features and redraw them. If the layer is visible and in range of the map extent, the refresh event will be triggered. Takes in an optional obj object containing properties for event listeners.

assignRenderer()

assignRenderer(): Assigns a renderer to the layer based on the layer's renderers property.

displayError()

displayError(): Shows an alert informing the user that their browser does not support the layer's renderers.

Featureの追加 example code

Featureの追加の簡単なexample codeを作成してみましょう。以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter9¥にしておきます。
ファイル名は、chapter9_ex3.htmlで保存します。

 
<!DOCTYPE html>
<html lang='ja'>
	<head>
		<meta charset='utf-8' />
		<script type='text/javascript' src='http://localhost/openlayers/OpenLayers.js'></script>
		<script type='text/javascript'>
			var map;

			function init() {
				//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'
				}, {});

				var vector_layer = new OpenLayers.Layer.Vector('Basic Vector Layer');

				//Add point
				var point = new OpenLayers.Geometry.Point(-72, 42);
				var feature_point = new OpenLayers.Feature.Vector(point);
				vector_layer.addFeatures([feature_point]);

				map.addLayers([wms_layer, vector_layer]);

				//Add a LayerSwitcher control and a editing control bar
				map.addControl(new OpenLayers.Control.LayerSwitcher());
				map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));

				if (!map.getCenter()) {
					map.zoomToMaxExtent();
				}

			}

		</script>
	</head>

	<body onload='init();'>
		<div id='map_element' style='width: 600px; height: 480px;'></div>
	</body>
</html>

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'
}, {});
 
var vector_layer = new OpenLayers.Layer.Vector('Basic Vector Layer');

WMS layerをbase layerとして作成して、new OpenLayers.Layer.Vectorでvector layerを作成します。

次に、point featureを追加します。

//Add point
var point = new OpenLayers.Geometry.Point(-72, 42);
var feature_point = new OpenLayers.Feature.Vector(point);
vector_layer.addFeatures([feature_point]);
 
map.addLayers([wms_layer, vector_layer]);

point objectを経度緯度(-72, 42)でGeometry.Pointで作成して、 feature_pointのobjectをOpenLayers.Feature.Vector(point)で作成します。
そして、vector_layer.addFeatures([feature_point])でvector layerに追加します。
最後にwms_layerとvector_layerをaddLayeresでmapに追加します。

次に、EditingToolbarを追加します。

map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));

addControl(…)でvector_layerに関連づけます。

保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter9/chapter9_ex3.htmlと入力すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_37_image01.jpg

ように経度緯度(-72, 42)にpointが追加されたvector layerが表示されて、EditingToolbarが追加されたmapが表示されます。

今回のまとめ

OpenLayersの簡単なvector layerのclassについて学びました。(ちょい手抜きの部分もありますが。。。)
次回は、引き続きvector Layer Classについて基本を学んでいきます。

また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん!!とかいろんな意見をいただければと思います。
そこんところ ヨロシク~~!!

OpenLayers Tutorialの目次に戻る。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

WP-SpamFree by Pole Position Marketing

Social Widgets powered by AB-WebLog.com.