leaflet地图实现滑块放大缩小以及拉框放大缩小

前言：

最近公司在做一个有关地图的项目，说到地图，就我个人而言，还没接触过，所以拿到项目的时候是一愣一愣的，心想这都是些啥玩意？没办法，既然项目需要，那就得硬着头皮去干，除非你想卷覆盖走人。

需求：

1. 拉动滑块实现地图放大缩小
2. 拉框实现地图放大缩小

过程：

拿到需求的时候第一件事当然是找相关的API啦、找文档啦，公司这边要求使用的地图是leaflets地图，所以就得花时间看看leaflet的相关文档。虽然项目已经做的差不多，当由于产品这边提的两个需求刚好在文档里面找不到，也就是leaflet地图没有提供相关的属性（其实不是没有，只是本人对于这个地图了解得不够深入）。所以只能翻墙找相关案例。

一、leaflet 拉动滑块实现地图放大缩小

这个滑块功能我在leaflet地图上没有找到相关的属性，所以自己琢磨了很久也琢磨不出来。当时有想过自己写一下这个功能的，思路如下：

1. 使用 element ui 里面的滑块并且获取到滑块滚动的事件

2. 把滑块等级设置为32级（因为公司项目的地图的放大缩小支持到32级）

3. 滑块每滑动一次就调用一次对应的放大缩小方法（this.map.zoomin 或 this.map.zoomout ）

后来发现自己能力有限，虽然思路正确了，但只能实现滑块一级一级的滑动，无法实现越级滑动，所以这个思路无法实现（起码本人无法实现）。
后来靠翻墙才找到相关案例（因为leaflet地图是国外开发的，所以案例在外网会比较多）。leaflet滑块，有需要的可以进去看看，不过需要翻墙，不然进不去。

一、详细写法

• 如果你使用下面的代码还是无法实现，可以尝试安装一下这个插件 npm i leaflet.zoomslider

js代码区域

L.Control.Zoomslider = (function() {
   
  var Knob = L.Draggable.extend({
   
    initialize: function(element, stepHeight, knobHeight) {
   
      L.Draggable.prototype.initialize.call(this, element, element)
      this._element = element

      this._stepHeight = stepHeight
      this._knobHeight = knobHeight

      this.on('predrag', function() {
   
        this._newPos.x = 0
        this._newPos.y = this._adjust(this._newPos.y)
      }, this)
    },

    _adjust: function(y) {
   
      var value = Math.round(this._toValue(y))
      value = Math.max(0, Math.min(this._maxValue, value))
      return this._toY(value)
    },

    // y = k*v + m
    _toY: function(value) {
   
      return this._k * value + this._m
    },
    // v = (y - m) / k
    _toValue: function(y) {
   
      return (y - this._m) / this._k
    },

    setSteps: function(steps) {
   
      var sliderHeight = steps * this._stepHeight
      this._maxValue = steps - 1

      // conversion parameters
      // the conversion is just a common linear function.
      this._k = -this._stepHeight
      this._m = sliderHeight - (this._stepHeight + this._knobHeight) / 2
    },

    setPosition: function(y) {
   
      L.DomUtil.setPosition(this._element,
        L.point(0, this._adjust(y)))
    },

    setValue: function(v) {
   
      this.setPosition(this._toY(v))
    },

    getValue: function() {
   
      return this._toValue(L.DomUtil.getPosition(this._element).y)
    }
  })

  var Zoomslider = L.Control.extend({
   
    options: {
   
      position: 'topleft',
      // Height of zoom-slider.png in px
      stepHeight: 6,
      // Height of the knob div in px (including border)
      knobHeight: 4,
      styleNS: 'leaflet-control-zoomslider'
    },

    onAdd: function(map) {
   
      this._map = map
      this._ui = this._createUI()
      this._knob = new Knob(this._ui.knob, this.options.stepHeight, this.options.knobHeight)

      map.whenReady(this._initKnob, this)
        .whenReady(this._initEvents, this)
        .whenReady(this._updateSize, this)
        .whenReady(this._updateKnobValue, this)
        .whenReady(this._updateDisabled, this)
      return this._ui.bar
    },

    onRemove: function(map) {
   
      map.off('zoomlevelschange', this._updateSize, this)
        .off('zoomend zoomlevelschange', this._updateKnobValue, this)
        .off('zoomend zoomlevelschange', this._updateDisabled, this)
    },

    _createUI: function() {
   
      var ui = {
   }
      var ns = this.options.styleNS

      ui.bar = L.DomUtil.create('div', ns + ' leaflet-bar'),
      ui.zoomIn = this._createZoomBtn('in', 'top', ui.bar),
      ui.wrap = L.DomUtil.create('div', ns + '-wrap leaflet-bar-part', ui.bar)