OpenLayers 4：如何给图标一个更大的点击半径

Question

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

OpenLayers 4：如何给图标一个更大的点击半径

OpenLayers4: How to give icon a bigger click radius

html

javascript

css

maps

openlayers