OpenLayers矢量图层特征处理程序

Question

OpenLayers矢量图层特征处理程序

vectorlistenerhandleropenlayers

4

我有一个OpenLayers矢量图层，其特征散布在地图上。我希望能够单击某个要素并显示消息。

我不确定是否有一种方法可以为每个要素添加监听器/处理程序。

有任何想法吗？

- gberg927

3个回答

5

您需要使用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;
    }

这是您将要使用的控件的参考资料：

- Rohan Singh

这个例子只有一个图层，但我注意到一旦你开始使用两个矢量图层并需要添加/激活第二个控件来执行悬停操作，其中一个将不起作用。（而你需要取消激活能够正常工作的那个来使另一个运行）。很奇怪。 - Glenn Plas

0

如果有很多向量图层，是否需要为每个图层编写“layer_name.events.on…”？是否可以制作一个图层列表，并将“.events.on”分配给所有图层？

- dimmer

我自己没有尝试过，但是当你创建SelectControl时，可以发送一个矢量图层数组，而不仅仅是像上面的示例中一样只发送一个。然后你应该能够在selectControl.onSelect(){}函数中捕获选择事件。 - igorti

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- igorti · Accepted Answer

添加SelectFeature控件：

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
  }
});