概述

在 Openlayers 中，ZoomToExtent控件可能用的不是很多，它主要用于将地图视图缩放到指定范围，应用场景就是重置地图、恢复初始状态。但是一般情况下，重置地图可能还会有其它操作，比如清除地图上绘制的点线面或者显示隐藏某些图层或者面板等等，但是我们可以了解下ZoomToExtent控件实现的原理。

源码分析

ZoomToExtent控件实现如下：

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

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

    this.extent = options.extent ? options.extent : null;

    const className =
      options.className !== undefined ? options.className : "ol-zoom-extent";

    const label = options.label !== undefined ? options.label : "E";
    const tipLabel =
      options.tipLabel !== undefined ? options.tipLabel : "Fit to extent";
    const button = document.createElement("button");
    button.setAttribute("type", "button");
    button.title = tipLabel;
    button.appendChild(
      typeof label === "string" ? document.createTextNode(label) : label
    );

    button.addEventListener(
      EventType.CLICK,
      this.handleClick_.bind(this),
      false
    );

    const cssClasses =
      className + " " + CLASS_UNSELECTABLE + " " + CLASS_CONTROL;
    const element = this.element;
    element.className = cssClasses;
    element.appendChild(button);
  }

  handleClick_(event) {
    event.preventDefault();
    this.handleZoomToExtent();
  }

  handleZoomToExtent() {
    const map = this.getMap();
    const view = map.getView();
    const extent = !this.extent
      ? view.getProjection().getExtent()
      : fromUserExtent(this.extent, view.getProjection());
    view.fitInternal(polygonFromExtent(extent));
  }
}

ZoomToExtent控件的构造函数

ZoomToExtent控件的构造函数接受一个参数options对象，该参数包含如下属性：

• target: 控件添加的目标容器，默认不存在，会添加到overlay container中
• extent：数组，边界范围，默认为null
• label：控件标签，默认E
• className：控件类名，默认ol-zoom-extent
• tipLabel：控件hover聚焦时显示

ZoomToExtent控件的构造函数就是在实例化时会创建并添加元素，绑定元素的click事件监听，回调函数是handleClick_

ZoomToExtent控件的方法

ZoomToExtent控件主要的方法就是handleZoomToExtent，该方法会在handleClick_中调用，即点击控件时会触发。

handleZoomToExtent方法实现如下：

handleZoomToExtent() {
    const map = this.getMap();
    const view = map.getView();
    const extent = !this.extent
      ? view.getProjection().getExtent()
      : fromUserExtent(this.extent, view.getProjection());
    view.fitInternal(polygonFromExtent(extent));
}

handleZoomToExtent方法就是获取对象的地图实例以及视图对象，然后判断this.extent，即options参数中是否传了extent，若没传，则取对象的视图对象投影下的范围；否则调用fromUserExtent方法将this.extent转为当前投影下合适的范围；然后调用polygonFromExtent将extent转为集合多边形，最后调用view.fitInternal内部方法来调整视图的可视范围，以适应给定的几何对象。fitInternal方法会根据提供的几何对象重新设置地图的视图，确保这个范围能够完全显示在当前视图中。

总结

本文主要介绍了ZoomToExtent控件的实现原理，核心是通过view.fitInternal内部方法调整地图视图。