Question

我使用以下代码将功能添加到OpenLayers 3（OL3）中的矢量图层：

marker = new ol.Feature({
    geometry: new ol.geom.Point([longitude, latitude]),
    name: "Location Marker"
});
markerStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 1.0],
    anchorXUnits: "fraction",
    anchorYUnits: "fraction",
    src: "Content/Images/OpenLayers/marker_trans.png"
  }),
  zIndex: 100000
});
marker.setStyle(markerStyle);
marker.on("click", function(e) {
  // do something
}, marker);
map.getSource().addFeature(marker);

标记按预期显示，但点击事件永远不会触发。我做错了什么？

我应该注意到，在地图级别已经存在与“click”相关联的处理程序，即

map.on("click", function(e) {
  // do something
}, marker);

Answer 1

第一：功能不会点击！有关事件功能的信息，请检查http://openlayers.org/en/master/apidoc/ol.Feature.html。

为了检查功能是否被点击，有ol.Map的.forEachFeatureAtPixel(pixel, callback)功能。（http://openlayers.org/en/master/apidoc/ol.Map.html#forEachFeatureAtPixel）对像素的每个要素执行回调。回调传递了2个参数：特征和特征所在的层。

如果您不使用openlayers事件处理程序但在视口上使用处理程序，则很高兴知道.getEventPixel(event)函数。如果您使用openlayers事件处理程序，则该事件具有属性.pixel。（http://openlayers.org/en/master/apidoc/ol.Map.html#getEventPixel）方法.getEventCoordinate(event)和.getCoordinateFromPixels(pixels)也可能有用。

所以你要把它像这样添加到你的map.on（“点击”，......：

map.on("click", function(e) {
    map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
        //do something
    })
});

与jQuery相同：

$(map.getViewport()).on("click", function(e) {
    map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
        //do something
    });
});

与纯JS相同：

map.getViewport().addEventListener("click", function(e) {
    map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
        //do something
    });
});

您可能还想查看此示例，此函数有两种用法，第一次使用openlayers事件，第二次使用jQuery事件： http://openlayers.org/en/master/examples/icon.js

注意

还有可能使用ol.interaction.Select（http://openlayers.org/en/master/apidoc/ol.interaction.Select.html?unstable=true）执行此操作，但这种情况有点过于强大。由于openlayers在内部将所选功能移动到另一个所谓的非托管层，因此它有一些不直观的警告。

无论如何，这可以通过向属于交互的集合添加侦听器来实现。可以使用.getFeatures()检索该集合。

interaction.getFeatures().on("add", function (e) { 
    // do something. e.element is the feature which was added
});

Answer 2

如果您只想点击地图，this will work就可以了。

TV

在OpenLayers 3中添加事件处理程序到功能？

2 个答案:

注意