Question

我有一个传单应用程序，上面有一些geojson行功能。线条的重量是1px，我在点击事件上有一个弹出窗口。

问题是，为了点击这一行，你的光标必须超过确切的像素，这非常令人沮丧。

有没有办法让线条周围的点击事件缓冲区增加2或3个像素？我不想让线条更粗，因为有太多的功能，它看起来会非常拥挤。

提前致谢！

Answer 1

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

此插件允许使用公差距离检测线上的鼠标点击和覆盖事件。

如果路径以非常小的权重绘制，或者用于移动设备上的点击检测，则手指精度可能会成为问题。

使用online demo进行游戏。

需要Leaflet.GeometryUtil。

实例：

＆＃13;

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

＆＃13;

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

＆＃13;

Leaflet Geojson 1px Line功能太难点击弹出窗口

1 个答案: