源码分析之Openlayers中ZoomSlider滑块缩放控件

访问Openlayers网站(https://jinuss.github.io/Openlayers_map_pages/，网站是基于Vue3 + Openlayers，里面有大量的实践和案例。觉得还不错，可以 给个小星星Star，鼓励一波 https://github.com/Jinuss/OpenlayersMap哦~

概述

ZoomSlider滑块缩放控件就是Zoom缩放控件的异形体，通过滑块的拖动或者点击滑槽，实现地图的缩放；另外其他方式控制地图缩放时，也会引起滑块在滑槽中的位置改变；即ZoomSlider滑块缩放控件会监听地图的缩放级别，当级别发生改变时，也会触发ZoomSlider中注册的事件，从而改变滑块的相对位置。

本文主要介绍 Openlayers 中ZoomSlider滑块缩放控件的源码实现和核心逻辑分析。

源码分析

ZoomSlider源码实现

ZoomSlider类控件继承于Control类，关于Control类，可以参考这篇文章源码分析之Openlayers中的控件篇Control基类介绍。

ZoomSlider类的源码如下：

class ZoomSlider extends Control {
   
   
  constructor(options) {
   
   
    options = options ? options : {
   
   };

    super({
   
   
      target: options.target,
      element: document.createElement("div"),
      render: options.render,
    });

    this.dragListenerKeys_ = [];

    this.currentResolution_ = undefined;

    this.direction_ = Direction.VERTICAL;

    this.dragging_;

    this.heightLimit_ = 0;

    this.widthLimit_ = 0;

    this.startX_;

    this.startY_;

    this.thumbSize_ = null;

    this.sliderInitialized_ = false;

    this.duration_ = options.duration !== undefined ? options.duration : 200;

    const className =
      options.className !== undefined ? options.className : "ol-zoomslider";
    const thumbElement = document.createElement("button");
    thumbElement.setAttribute("type", "button");
    thumbElement.className = className + "-thumb " + CLASS_UNSELECTABLE;
    const containerElement = this.element;
    containerElement.className =
      className + " " + CLASS_UNSELECTABLE + " " + CLASS_CONTROL;
    containerElement.appendChild(thumbElement);

    containerElement.addEventListener(
      PointerEventType.POINTERDOWN,
      this.handleDraggerStart_.bind(this),
      false
    );
    containerElement.addEventListener(
      PointerEventType.POINTERMOVE,
      this.handleDraggerDrag_.bind(this),
      false
    );
    containerElement.addEventListener(
      PointerEventType.POINTERUP,
      this.<