javascript - OpenLayers4 : How to give icon a bigger click radius

Question

我正在尝试制作一个图标功能，我可以在手机上更轻松地点击它。我有一个很好地设置的图标，当使用鼠标点击它时没有问题。然而，当我在手机上使用手指或拇指时，很难获得准确的点击。我正在使用 ol.geom.Point 并给它一个图标样式。我尝试了 ol.geom.Circle，但我无法使用它来使用图标样式。

这是我工作的 ol.geom.Point 的一个例子:

        for (i in spots) {
            var spot = spots[i];
            var coords = spot['coords'];
            var lat = parseFloat(coords.split(',')[0]);
            var lng = parseFloat(coords.split(',')[1]);
            var iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([lng, lat])),
                type: 'spot'
            });  
            iconFeature.setStyle(spotMarker);
            features.push(iconFeature);
        }
        vectorSourceSpots = new ol.source.Vector({
            features: features
        });
        var vectorLayer = new ol.layer.Vector({
            source: vectorSourceSpots
        });
        map.addLayer(vectorLayer); 

这里是 spotMarker 样式:

        var spotMarker = new ol.style.Style({
            image: new ol.style.Icon(({
                src: 'images/spot.png'
            }))
        });

我也尝试过使用 ol.geom.Circle，但是当我尝试这个时我看不到我的图标:

        for (i in spots) {
            var spot = spots[i];
            var coords = spot['coords'];
            var lat = parseFloat(coords.split(',')[0]);
            var lng = parseFloat(coords.split(',')[1]);
            var iconFeature = new ol.Feature({
                geometry: new ol.geom.Circle(ol.proj.fromLonLat([lng, lat]), 5),
                type: 'spot'
            });  
            iconFeature.setStyle(spotMarker);
            features.push(iconFeature);
        }
        vectorSourceSpots = new ol.source.Vector({
            features: features
        });
        var vectorLayer = new ol.layer.Vector({
            source: vectorSourceSpots
        });
        map.addLayer(vectorLayer); 

我想要的是让图标保持相同的大小，但只是增加图标周围的点击半径。几乎就像一个比图标大一点的隐形圆圈，中心相同。

这可能吗？

Answer 1

您将使用forEachFeatureAtPixel 为特征添加事件，然后您可以在其options 参数上设置hitTolerance。

查看此 api 文档:forEachFeatureAtPixel

你可能需要写:

var addEvent = function(map, evt) {
    map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {

    }, {
        hitTolerance: 10
    });
};

map.on('click', function(evt) {
    addEvent(map, evt);
});