Leaflet.js:允许在map DIV顶部使用HTML元素的默认拖动/缩放选项

Question

我正在使用一些javascript/css在一个单张控制的地图上‘绘制’我自己的DIV和IMG元素。我已经成功地同步了平移和缩放移动，所以看起来我自己的元素在背景中确实是地图的一部分。

唯一的主要缺点是:当我将鼠标放在自定义HTML元素上时，鼠标图标从“移动”图标变为默认指针，并且无法拖动或缩放地图。

有没有办法给页面上的特定HTML元素提供拖拽和缩放控件，就像在地图上一样？我不希望在所有元素上都这样，但其中一些元素需要提供不同类型的用户交互。

我还没有真正探索过Leaflet的自定义层系统。我假设这类自定义层的HTML元素在默认情况下也可能具有这些控件。但有一些原因，我更喜欢将HTML元素放在地图的顶部，与Leaflet div分开。

Answer 1

您应该使用HTML层，正如您所描述的，它是嵌入在地图中的L.control元素，其工作方式与您所说的一样。

它们易于使用，并通过使用L.Control.extend方法进行初始化。

下面是一个例子：

var self = this;
var newButton;
L.Control.currentPosition = L.Control.extend({
  onAdd: function (map) {
    //this method is called when this new control is added later to your map
    var className = 'your-custom-container-class',
    container = L.DomUtil.create('div', className);
    newButton = this._createButton(
      '', 'your-button-title',  'your-custom-button-class', 'your-button-id', container, this.newButtonFunction,  self);
    return container;
  },

  newButtonFunction: function(ev){

  },

  _createButton: function (html, title, className, id, container, fn, context) {
    var link = L.DomUtil.create('a', className, container);
    link.innerHTML = html;
    link.href = '#';
    link.title = title;
    link.id = id;
    var stop = L.DomEvent.stopPropagation;
    L.DomEvent
      .on(link, 'click', stop)
      .on(link, 'mousedown', stop)
      .on(link, 'dblclick', stop)
      .on(link, 'click', L.DomEvent.preventDefault)
      .on(link, 'click', fn, context);
    return link;
  }
});

//finally add the new control to your map object
this.map.addControl(new L.Control.newButton());

您可以这样做;)