如何使 Leaflet 折线更“可触摸”或点击友好？答案

【问题标题】：How to make Leaflet polylines more 'touchable' or tap-friendly?如何使 Leaflet 折线更“可触摸”或点击友好？
【发布时间】：2019-02-09 03:12:21
【问题描述】：

我正在使用传单渲染 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/

【问题讨论】：

标签： leaflet maps touch gis react-leaflet

【解决方案1】：

使用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 } );

【讨论】：