Tag Archives: open - Page 28

OpenLayersのVector Layer classについて-3[Chapter 39]

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

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

この章以降は、

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

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

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

OpenLayers.Vectorのmethodについて補足します。

OpenLayers.Layer.Vector methods

以下はFeatureのmethodです。

drawFeature(feature, style)

drawFeature(feature, style): This will draw / redraw a passed in feature to the layer. You should only use this function if the feature's style has changed—it will not add a feature to the layer, and will only work after a feature has been added. The feature parameter is the feature you wish to draw, and the style parameter is an optional style {Object}. If no style is passed in, the layer's default style is used.

eraseFeatures(features)

eraseFeatures(features): This function takes in an array of feature objects and erases them from the map. It does not remove the features from the layer object, nor does it destroy the feature object itself. Using this function, you can remove the feature from the map, but retain the feature in the layer's feature list—then you can pass the erased feature into the drawFeature method to reshow it.

getFeatureById(featureId)

getFeatureById(featureId): This function accepts a {String} consisting of a feature ID. It will return a {OpenLayers.Feature.Vector} object (a feature object) that corresponds to the passed in ID—if none is found, it will return null. The ID, if you do not set it when creating a feature object, is an automatically generated string that will be something like OpenLayers.Feature.Vector_42—the number is also essentially random, so you will likely only need to use this function if you set the ID of a feature when creating it. Otherwise, you may want to use the getFeatureByFid method.

getFeatureByFid(featureFid)

getFeatureByFid(featureFid): This function is similar to the getFeatureById function, but looks for a FID instead of an ID. The FID is a string that normally specifies the index of the feature in the features array (and it may have to be set manually if not loading data from external sources). Like getFeatureById, it accepts a {String} consisting of a feature Fid. It will return a {OpenLayers.Feature.Vector} object (a feature object) that corresponds to the passed in FID—if none is found, it will return null.

getFeatureFromEvent(event)

getFeatureFromEvent(event): Calling this function will return either the feature passed in an {Event} occurred over, or return null. For example, if a
featureselected event was passed in, this function would return the feature that was selected. We cover vector layer events in the next section.

onFeatureInsert(feature)

onFeatureInsert(feature): This method will be called right after a feature is inserted into the vector layer. By default, it is an empty function. If you supply a function, it will be called after a feature is inserted. The feature parameter will be passed in to whatever function you create.

preFeatureInsert(feature)

preFeatureInsert(feature): This method will be called right before a feature is inserted into the vector layer. By default, it is an empty function. If you supply a function, it will be called after a feature is inserted. The feature parameter will be passed in to whatever function you create

Feature event FireBug

Feature eventについてFireBugを使って、その動作の確認をしてみましょう。以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter9¥にしておきます。
ファイル名は、chapter9_ex31.htmlで保存します。

[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’);

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>
[/html]

OpenLayersでVector layerを使ってみる。[Chapter 35] と同じcodeですので、詳細は、OpenLayersでVector layerを使ってみる。[Chapter 35] をみてください。

保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter9/chapter9_ex31.htmlと入力して、Firebugを起動すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_38_image01.jpg

のように表示されます。

firebugのコンソールに

map.layers[1].preFeatureInsert = function(feature){
  alert('preFeatureInsert – ID: ' + feature.id)
};

を入力して実行すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_39_image01.jpg

ようにfunction()が追加されます。

次にEditorToolbarを使ってpointを追加すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_39_image02.jpg

のようにpointが追加されて、vector_79のIDとなります。(これはあくまでも私の環境でのIDです。各自firebugで確認するとID番号は違っているはずです。)

次にfiregugに、

map.layers[1].getFeatureById('OpenLayers.Feature.Vector_79');

を実行すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_39_image03.jpg

のようfeature objectが表示されます。vector_79のobjectをfirebugのDOMで確認すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_39_image04.jpg

のように経度緯度データが作成されています。

次にfirebugのコンソールに

map.layers[1].onFeatureInsert = function(feature){
  alert('onFeatureInsert - Geometry:' + feature.geometry)
};

を入力して、EditorToolbarを使ってpointを追加すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_39_image05.jpg

でpoint feature objectのgeometryを表示することができます。

試しに、Polygonを追加してみると、
blog.godo-tys.jp_wp-content_gallery_openlayers_39_image06.jpg

でpolygon feature objectのgeometryを表示することができます。

今回のまとめ

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

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

OpenLayers Tutorialの目次に戻る。

Social Widgets powered by AB-WebLog.com.