Leaflet Geojson 1px Line Feature Too Hard to Click for Popup

Question

我有一个传单应用程序，上面有一些 geojson 线功能。线条的粗细为 1px，我在点击事件中绑定了一个弹出窗口。

问题是，要单击该行，您的光标必须位于确切的像素上，这非常令人沮丧。

有没有办法让点击事件缓冲区绕行2或3个像素？我不想把线拉的更粗，因为功能太多了，会显得很拥挤。

提前致谢！

Answer 1

您很可能对 Leaflet.AlmostOver 插件感兴趣：

This plugin allows to detect mouse click and overing events on lines, with a tolerance distance.

It is useful if paths are drawn with a very small weight, or for clicks detection on mobile devices, for which finger precision can be a problem.

Play with online demo.

It requires Leaflet.GeometryUtil.

实例：

var map = L.map('map').setView([48.86, 2.35], 11);

var line = L.polyline([
  [48.87, 2.3],
  [48.87, 2.4]
], {
  weight: 1
}).bindPopup('line of width 1 px with almostOver').addTo(map);

map.almostOver.addLayer(line);

map.on('almost:click', function(e) {
  var layer = e.layer;

  if (layer.openPopup) {
    layer.fire('click', e);
  }
});

var line2 = L.polyline([
  [48.85, 2.3],
  [48.85, 2.4]
], {
  weight: 1,
  color: 'red'
}).bindPopup('line of width 1 px without almostOver').addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-geometryutil@0.8.1/src/leaflet.geometryutil.js"></script>
<script src="https://rawgit.com/makinacorpus/Leaflet.AlmostOver/b1629f00c9708d4843829f2aef9e5791d0ad4a53/src/leaflet.almostover.js"></script>

<div id="map" style="height: 200px"></div>

Leaflet Geojson 1px Line Feature Too Hard to Click for Popup

Leaflet Geojson 1px Line Feature Too Hard to Click for Popup

javascript

css

events

geojson

leaflet