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在功能上添加事件，然后您可以在hitTolerance参数上设置options。

检查此api文档：forEachFeatureAtPixel

你可能需要写：

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

    }, {
        hitTolerance: 10
    });
};

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

OpenLayers4：如何为图标提供更大的点击半径

1 个答案: