OpenLayer3 之 实现拉框放大功能

几天前，有人给我发邮件询问如何实现划定一个矩形区域实现放大功能，即所谓的“拉框放大”，在 ol3 中，其实已有实现鼠标拖拽放大地图功能，默认需要配合 shift，按住shift，拖拽鼠标的同时，地图会放大，该组件名为 ol.interaction.DragZoom，该组件的缺点是不实用（哪一个非专业人员会想的按住shift拖动）。本文首先介绍该组件的实现，随后基于该组件，在地图上放置拉框按钮，实现一个较为实用的拖拽放大功能。

本文完整代码共享在了GitHub中：https://github.com/QingyaFan/openlayers3-examples

ol.interaction.DragZoom

拉框放大，首先你要拉框，然后根据用户拉出的矩形区域放大到合适地图视口的最大级别。拉框也不必我们实现，ol3 也已经有实现：ol.interaction.DragBox，为了基于 dragbox 组件实现拉框，ol.interaction.DragZoom继承了ol.interaction.DragBox。具体实现如下：

// dragzoom 构造函数
ol.interaction.DragZoom = function(opt_options) {
   
  var options = opt_options ? opt_options : {};
  // 触发拉框放大功能的情形
  // 此处为按下 shift 键，mac 是 cmd 键
  var condition = options.condition ? options.condition :  ol.events.condition.shiftKeyOnly;
  // 放大过程的时间
  this.duration_ = options.duration