javascript - 如何从自定义事件处理程序 Leaflet 获取点击位置

Question

我正在尝试为 CTRL + 单击 Leaflet 编写自定义事件处理程序。我的问题是 map 给出的点击位置与事件处理程序中的点击位置不同，例如LatLng(51.49174, -0.11639)从 map 上点击变成LatLng(51.50938, -0.126)在处理程序中。如果页面上只有 map ，则点击位置完全匹配。在 map 上方添加一些其他 div 元素(如 <h1> 标题)会使点击不匹配。平移 map 也会使点击位置不匹配。

我想知道我是否附上了我的 L.DomEvent.on()正确。关注Leaflet Handlers tutorial ，我的代码看起来像

L.CtrlClickHandler = L.Handler.extend({
  addHooks: function() {
    L.DomEvent.on(document, 'click', this._captureClick, this);
  },

  removeHooks: function() {
    L.DomEvent.off(document, 'click', this._captureClick, this);
  },

  _captureClick: function(event) {
    if (event.ctrlKey) {
      console.log('control click registered at layer ' 
        + map.layerPointToLatLng(new L.point(event.layerX, event.layerY)));
    }
  }
});

// add this to all maps
L.Map.addInitHook('addHandler', 'ctrlClick', L.CtrlClickHandler);

这是一个 live example on JSFiddle .

由于代码中的一些其他依赖项，我正在使用 Leaflet 0.7.7。升级到 Leaflet 1.0.1 使其匹配得更好(例如， LatLng(51.49868, -0.1018) 与 LatLng(51.4987, -0.1018) )但两个位置仍然不完全相同。

我是否将 L.DomEvent 附加到正确的事物上？应该以某种方式附加到 map div，而不是 document ？

编辑:感谢@AlexParij 的建议。我意识到平移 map 也会使点击不匹配，有或没有 div map 上方的元素。 Leaflet 1.0.1 和 0.7.7 都会发生这种情况。我已经尝试了我能想到的所有组合，将不同的事件位置( event.layerX 、 event.pageX 、 event.clientX 、 event.offsetX 、 event.screenX 和 event.x )与投影方法 layerPointToLatLng 相结合和 unproject但它们都不符合 map 点击。现在我真的很困惑......摆弄这些不同的选项和 Leaflet 1.0.1:https://jsfiddle.net/c4tkyewz/

Answer 1

TL; DR:在自定义处理程序中使用 map.mouseEventToLatLng()。

---

@AlexParij 是正确的；我没有使用层点和容器点的正确定义。在处理程序内部，event 不同于 Leaflet 的内部鼠标事件(位置可从 e.latlng 获得)。

我翻阅了 Leaflet 的核心来寻找答案。从 event 获取位置需要获取 Mouse Event -> Container Point -> Layer Point -> latLng。值得庆幸的是，Leaflet 开发人员已经为此编写了一个很好的函数:mouseEventToLatLng()。

/*
 * This is a custom handler to check if someone has control clicked
 * the map and print the location of the click
 */
L.CtrlClickHandler = L.Handler.extend({
  addHooks: function() {
    L.DomEvent.on(document, 'click', this._captureClick, this);
  },

  removeHooks: function() {
    L.DomEvent.off(document, 'click', this._captureClick, this);
  },

  _captureClick: function(event) {
    if (event.ctrlKey) {
      // translate mouse event to lat/lng (note: `mouseEventToLatLng()` 
      // calls Leaflet's `mouseEventToContainerPoint()` followed by 
      // `containerPointToLayerPoint()` and finally `layerPointToLatLng()`)
      var latlng = map.mouseEventToLatLng(event);
      console.log('Handler detected CTRL + click at ' + latlng);
    }
  }
});

// add this to all maps
L.Map.addInitHook('addHandler', 'ctrlClick', L.CtrlClickHandler);

Leaflet 1.0.1 的实例:https://jsfiddle.net/c4tkyewz/1/

还使用 Leaflet 0.7.7 进行了测试。

---

作为奖励，要直接从 Leaflet 对点击事件的 native 处理 map.on('click', function(e) {}); 访问 CTRL 键，请使用 e.originalEvent。 ctrl键.