Как сделать полилинии Leaflet более «осязаемыми» или удобными в использовании? - PullRequest
Новая
       53

Как сделать полилинии Leaflet более «осязаемыми» или удобными в использовании?

0 голосов
/ 09 февраля 2019

Я рендеринг 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/

enter image description here

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Используйте параметр tolerance L.Renderer (т.е. используйте параметр tolerance при создании экземпляра L.Canvas или L.SVGвизуализатор).Значение для этой опции дано в пикселях.

например, возьмите пример кода в документации Leaflet для L.Canvas и включите tolerance: 

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5, tolerance: 20 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
0 голосов
/ 09 февраля 2019

У меня была такая же проблема, когда я пытался нажимать на маленькие маркеры, когда их много.

Чтобы решить эту проблему, я полностью изменил парадигму ...

Вместо того, чтобы касатьсяМаркер, я перемещаю карту, чтобы навести маркер на цель ...

Попробуйте это http://franceimage.github.io/map с помощью планшета или смартфона.

Надеемся, логика может быть применена кваш случай.

...