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

您需要使用SelectFeature控件和OpenLayers.Popup類之一的組合，例如OpenLayers.Popup.FramedCloud 。 這是一個例子：

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

在該示例中，嘗試使用“繪制多邊形”選項繪制多邊形（雙擊地圖以完成多邊形）。 然后使用“單擊選擇多邊形”並單擊多邊形，您將獲得一個框架雲彈出窗口。

您可以查看頁面的來源以了解它是如何完成的。 以下是代碼的相關部分。 當然，您可以將message更改為要在框架雲中顯示的內容：

    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

Answer 3

如果有很多矢量圖層，是否需要為每一層寫“layer_name.events.on ...”？ 是否可以制作圖層列表並為所有圖層分配“.events.on”？