OpenLayersのVector Layer classについて-2[Chapter 38]

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

OpenLayersのVector Layer classについて-1[Chapter 37] に引き続き、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です。

removeFeatures(features, options)

removeFeatures(features, options): This function will remove features from the vector layer by erasing the passed in features and removing them from the layer (but the features themselves are not destroyed). Two events are triggered for each feature—beforefeatureremoved and featureremoved. This function takes in two parameters, like the addFeatures method. The features parameter is an {Array{OpenLayer.Feature.Vector}}, and options is an anonymous {Object}. The options parameter can accept a silent property which is a {Boolean} with a default value of false which determines if the events will be triggered or not.

removeAllFeatures(options)

removeAllFeatures(options): Calling this function will remove all features from the map. Like the method above, it will not destroy the features, but it will erase them from the map and remove them from the layer's feature array. It takes in one optional options parameter that can accept a silent property, if set to true, will suppress events from triggering.

destroyFeatures(features, options)

destroyFeatures(features, options): This function will erase and destroy any features that get passed in. The difference between this function and removeFeatures is that destroyFeatures will both remove the features from the layer and destroy the features themselves—so you cannot add a feature back to the map that has been destroyed. It takes in two parameters—both are optional. If the features parameter is not passed in, all the features of the layer will be destroyed.

removeFeature FireBug

removeFeaturesについて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のコンソールに

var feature_point = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-72, 42));
map.layers[1].addFeatures([feature_point]);

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

ように経度緯度(-72, 42)にpointが追加されます。

次にpoint featureを削除してみましょう。
firebugのコンソールに

map.layers[1].removeFeatures([feature_point]);

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

のようにpointが削除されます。

削除されたfeatureを確認すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_38_image04.jpg

のようfeature objectが[]で空になっています。

featureを完全に削除するには、
firebugのコンソールに

map.layers[1].destroyFeatures([feature_point]);

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

でobjectを破棄できます。

いろいろなmethodを試して、firebug上でobjectについて確認するのも良いですね。

今回のまとめ

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

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

OpenLayers Tutorialの目次に戻る。

Comments are closed.

Social Widgets powered by AB-WebLog.com.