如何使单张折线更“可触摸”或自来水友好？

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),


        });
    };

触摸事件（点击= TAP）似乎只是当我幸运地工作。怎样才能让小叶折线更可点击？

探索插件选项，但大部分已经过时：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（即实例化一个tolerance或L.Canvas渲染器时使用L.SVG选项）。该选项的值以像素为单位给出。

例如采取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 } );