16

我正在使用以下代码向 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);

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

我应该注意，在地图级别已经有一个与“点击”相关的处理程序，即

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

3 回答 3

50

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

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

.getEventPixel(event)如果您不使用 openlayers 事件处理程序而是使用视口上的处理程序，那么很高兴知道该功能。如果您使用 openlayers 事件处理程序，则该事件有一个属性.pixel。( http://openlayers.org/en/master/apidoc/ol.Map.html#getEventPixel ) 这些方法.getEventCoordinate(event)也.getCoordinateFromPixels(pixels)可能有用。

所以你会像这样将它添加到你的 map.on("click", ... ：

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
});
于 2014-10-16T15:19:30.600 回答
3

如果您只想点击地图，这对您有用。

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      })
    ],
    view: new ol.View({
      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
      zoom: 4
    })
  });

map.on("click", function(evt) {
    var coord = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    var lon = coord[0];
    var lat = coord[1];
    alert(lon);
    alert(lat);
});
于 2015-05-16T08:56:04.333 回答
2

如果您只需要在地图上添加一个可点击的标记，则可以使用叠加层。在您的 HTML 标头中定义标记的样式：

<style>
    #marker {
        width: 20px;
        height: 20px;
        border: 1px solid #088;
        border-radius: 10px;
        background-color: #0FF;
        opacity: 0.5;
    }
</style>

然后在文件的脚本部分中，创建地图后：

    // add marker
    var pos = ol.proj.fromLonLat([0.01123, 0.00612]);
    var marker = new ol.Overlay({
        position: pos,
        positioning: 'center-center',
        element: $('<div id="marker" title="Marker"></div>')
            .popover({
                'placement': 'top',
                'html': true,
                'content': '<strong>anything...</strong>'
            })
            .on('click', function (e) { $(".location-popover").not(this).popover('hide'); }),
        stopEvent: false
    });
    map.addOverlay(marker);
于 2015-08-26T19:42:34.470 回答