OpenLayersベクトルレイヤーフィーチャーハンドラー

Question

マップ上にフィーチャーが散在したopenlayersベクトルレイヤーがあります。私は機能をクリックしてメッセージを表示できるようにしたい。

各機能にリスナー/ハンドラーを追加する方法があるかどうかはわかりません。

アイデア？

Answer 1

SelectFetureコントロールを追加します。その後

var selectFeature = new OpenLayers.Control.SelectFeature(vector_layer); 
map.addControl(selectFeature); 
selectFeature.activate(); 

をあなたは/ベクトルレイヤー上の選択を解除したイベントを選択するために聞くことができます。多くのベクトルレイヤーがある場合は

vector_layer.events.on({ 
    'featureselected': function(feature) { 
     //display your message here 
    }, 
    'featureunselected': function(feature) { 
     //hide message 
    } 
}); 

Answer 2

は「LAYER_NAMEを書くことが必要です。 events.on ... "各層のために？レイヤのリストを作成し、それらのすべてに ".events.on"を割り当てることは可能ですか？

Answer 3

SelectFeatureコントロールとOpenLayers.Popup.FramedCloudのようなOpenLayers.Popupクラスのいずれかの組み合わせを使用する必要があります。ここではそれだけの例です。この例で

http://openlayers.org/dev/examples/select-feature-openpopup.html

、（多角形を完了するために、マップ上でダブルクリックして）ポリゴンを描画する「多角形を描く」オプションを使用してみてください。次に、「クリックしてポリゴンを選択」を使用してポリゴンをクリックすると、枠付きのクラウドポップアップが表示されます。

ページのソースを表示して、これがどのように行われているかを確認できます。ここにコードの関連部分があります。コントロールの参照は、あなたが使用されますされている。ここ

var map = <your OpenLayers.Map object>; 
    var polygonLayer = <your vector layer>; 

    selectControl = new OpenLayers.Control.SelectFeature(polygonLayer, 
      {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); 
    map.addControl(selectControl); // not in the example, but do this 

    function onPopupClose(evt) { 
     selectControl.unselect(selectedFeature); 
    } 

    function onFeatureSelect(feature) { 
     var message = "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>"; 

     selectedFeature = feature; 
     popup = new OpenLayers.Popup.FramedCloud("chicken", 
      feature.geometry.getBounds().getCenterLonLat(), 
      null, 
      message, 
      null, true, onPopupClose); 
     feature.popup = popup; 
     map.addPopup(popup); 
    } 

    function onFeatureUnselect(feature) { 
     map.removePopup(feature.popup); 
     feature.popup.destroy(); 
     feature.popup = null; 
    } 

：

• http://dev.openlayers.org/apidocs/files/OpenLayers/Control/SelectFeature-js.html
• http://dev.openlayers.org/apidocs/files/OpenLayers/Popup/FramedCloud-js.htmlあなたは、もちろん、あなたが枠クラウドで表示したいものは何でもへmessageを変更することができます