传单geojson 1PX线的功能太难单击弹出窗口

Question

我有一个传单应用程序，上面有一些Geojson Line功能。行的重量为1PX，在点击事件中，我有一个弹出窗口。

问题是，要单击行，您的光标必须超过精确的像素，这非常令人沮丧。

有没有一种方法可以用2或3个像素将点击事件缓冲区在生产线周围进行？我不想使行更厚，因为功能太多，看起来很拥挤。

预先感谢！

Answer 1

您很可能对传单感兴趣。

此插件允许以公差距离检测鼠标单击和越过线路。

如果有很小的重量绘制路径，或者对于在移动设备上的单击检测中，则可以是一个问题。

与在线演示一起玩。

它需要传单。几何。

实时示例：

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>