如何使Leaflet折线更“可触摸”或易于点击？

Question

我正在使用传单（包括各种线串）渲染GEOJSON。无论出于什么原因，我都很少能使用触摸事件。就像这样，很难让手指实际对准屏幕上的正确位置。

这是我的地图：

return (
        <Map
            style={{
                height: '100%',
                width: '100%',
                margin: '0 auto'
            }}
            onClick={this.closeAllMapPopups}
            ref={(el) => {
                this.leafletMap = el;
            }}
            center={position}
            zoom={9}>
            <TileLayer url='https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYawefawelbnMyNCIsImawefbDRtMzcwMDNmMzJydHdvcjF6ODA5In0.xdZi4pmkhj1zb9Krr64CXw' attribution='&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>' />
            <GeoJSON data={locations} ref="geojson" style={this.getStyle} onEachFeature={this.onEachFeature} 

            />{' '}
        </Map>

这是我的onEachFeature：

onEachFeature = (feature, layer) => {
        //console.log(layer);

        layer.on({
            mouseover: (e) => this.MouseOverFeature(e, feature),
            click: (e) => this.clickFeature(e, feature),
            mouseout: (e) => this.resetHighlight(e, feature),


        });
    };

只有当我幸运时，触摸事件（单击=点击）才起作用。如何使传单折线更具可点击性？

浏览了插件选项，但大多数已过时： https://github.com/geoloep/Leaflet.ClickTolerance https://github.com/perliedman/leaflet-touch-helper/

Answer 1

当有很多小标记时，我也遇到了同样的问题。

为了解决这个问题，我彻底改变了范式...

我没有触摸标记，而是移动地图将标记置于目标上...

在平板电脑或智能手机上尝试使用http://franceimage.github.io/map。

希望逻辑可以应用于您的案例。

Answer 2

使用tolerance option of L.Renderer（即在实例化L.Canvas或L.SVG渲染器时使用tolerance选项）。该选项的值以像素为单位。

例如拿example code in the Leaflet documentation for L.Canvas并加入tolerance：

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5, tolerance: 20 });
var line = L.polyline( coordinates, { renderer: myRenderer } );