概述

Map.DoubleClickZoom就是实现鼠标左键双击+shift控制地图实现缩放

源码分析

源码实现

Map.DoubleClickZoom源码实现如下：

Map.mergeOptions({
  doubleClickZoom: true,
});

export var DoubleClickZoom = Handler.extend({
  addHooks: function () {
    this._map.on("dblclick", this._onDoubleClick, this);
  },
  removeHooks: function () {
    this._map.off("dblclick", this._onDoubleClick, this);
  },
  _onDoubleClick: function (e) {
    var map = this._map,
      oldZoom = map.getZoom(),
      delta = map.options.zoomDelta,
      zoom = e.originalEvent.shiftKey ? oldZoom - delta : oldZoom + delta;

    if (map.options.doubleClickZoom === "center") {
      map.setZoom(zoom);
    } else {
      map.setZoomAround(e.containerPoint, zoom);
    }
  },
});

Map.addInitHook("addHandler", "doubleClickZoom", DoubleClickZoom);

源码详细分析

Map.DoubleClickZoom是基于事件处理器Handle基类实现的，其中就是定义了三个方法：钩子函数(addHooks/removeHooks)和_onDoubleClick方法

钩子函数

addHooks和removeHooks是Handle基类中的固定写法，分别在enable和disable中调用，用于添加和移除事件处理器。

在Map.DoubleClickZoom钩子函数中，对map实例注册(或解绑)的是双击dblclick事件，回调是_onDoubleClick方法

_onDoubleClick方法

_onDoubleClick方法是Map.DoubleClickZoom的核心方法，用于处理双击事件，接受一个e参数，该参数是鼠标事件对象。 在_onDoubleClick方法中，首先获取当前地图实例map和缩放级别oldZoom，然后获取缩放增量delta(默认为1)和缩放级别zoom。 如果按下了shift键，则缩放级别为oldZoom - delta，缩小地图，否则缩放级别为oldZoom + delta，放大地图。 如果map.options.doubleClickZoom为center，则调用map.setZoom(zoom)方法将地图缩放到指定的缩放级别。 否则，调用map.setZoomAround(e.containerPoint, zoom)方法将地图缩放到指定的缩放级别，并以鼠标点击的容器点为中心。

总结

Map.DoubleClickZoom是通过继承Handler类，实现了双击缩放的核心交互逻辑，通过Map.mergeOption设置默认开启双击缩放处理器，再调用Map.addInitHook方法将处理器添加到Map实例中，从而实现地图初始化时执行DoubleClickZoom的enable方法。