Javascript OpenLayers4：如何赋予图标更大的点击半径

我正在尝试做一个图标功能，我可以点击手机上更容易。我有一个图标设置得很好，当使用鼠标点击它时，没有问题。然而，当我在手机上使用手指或拇指时，很难获得准确的点击。我正在使用一个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); 

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

---

这可能吗？

您将使用

forEachFeatureAtPixel

在功能上添加事件，然后您可以在其

选项

参数上设置

hitTolerance

。

检查此api文档：

您可能需要写：

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

    }, {
        hitTolerance: 10
    });
};

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

---

您在该功能上设置事件的代码将很好地为您提供提示。该功能运行良好。除了我相信你的例子中的语法有点错误。当您去掉

选项：{hitTolerance:10}

并且只拥有选项数组本身

{hitTolerance:10}

时，它就可以工作了。也许你可以更新你的答案来修正它。干杯