OpenLayers 3 之 地图交互功能（interaction）详解

      地图交互功能和上一篇讲的地图控件有些混淆，它们都控制着用户与地图的交互，区别是地图控件的触发都是一些可见的 HTML 元素触发，如按钮、链接等；而交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。

      地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到 intercation 类，它定义了用户与地图进行交互的基本要素和事件。下面我们就来看看用户与地图都有那些交互，怎么交互。

注: ‘自定义用户交互类型’，‘定制化交互’ 或者 ‘交互优化’ 都超出了本文范围。

有问题可以留言评论或者给我发邮件！ qingyafan@163.com

一、interaction 介绍

      在 OpenLayers 3 中，表达交互功能的基类是 interaction，它是一个虚基类，不负责实例化，交互功能都继承该基类， OpenLayers 3 中可实例化的子类及其功能如下：

• doubleclickzoom interaction，双击放大交互功能；
• draganddrop interaction，以“拖文件到地图中”的交互添加图层；
• dragbox interaction，拉框，用于划定一个矩形范围，常用于放大地图；
• dragpan interaction，拖拽平移地图；
• dragrotateandzoom interaction，拖拽方式进行缩放和旋转地图；
• dragrotate interaction，拖拽方式旋转地图；
• dragzoom interaction，拖拽方式缩放地图；
• draw interaction，绘制地理要素功能；
• interaction defaults ，规定了默认添加的交互功能；
• keyboardpan interaction，键盘方式平移地图；
• keyboardzoom interaction，键盘方式缩放地图；
• select interaction，选择要素功能；
• modify interaction，更改要素；
• mousewheelzoom interaction，鼠标滚轮缩放功能；
• pinchrotate interaction，手指旋转地图，针对触摸屏；
• pinchzoom interaction，手指进行缩放，针对触摸屏；
• pointer interaction，鼠标的用户自定义事件基类；
• snap interaction，鼠标捕捉，当鼠标距离某个要素一定距离之内，自动吸附到要素。

二、交互功能的种类和使用方法

1. interaction defaults - 默认添加的交互功能

该类规定了默认包含在地图中的功能，主要是最为常用的功能，如缩放、平移和旋转地图等，具体功能有如下这些：

• ol.interaction.DragRotate，鼠标拖拽旋转，一般配合一个键盘按键辅助；
• ol.interaction.DragZoom，鼠标拖拽缩放，一般配合一个键盘按键辅助；
• ol.interaction.DoubleClickZoom，鼠标或手指双击缩放地图；
• ol.interaction.PinchRotate，两个手指旋转地图，针对触摸屏；
• ol.interaction.PinchZoom，两个手指缩放地图，针对触摸屏；
• ol.interaction.DragPan，鼠标或手指拖拽平移地图；
• ol.interaction.KeyboardZoom，使用键盘 + 和 - 按键进行缩放；
• ol.interaction.KeyboardPan，使用键盘方向键平移地图；
• ol.interaction.MouseWheelZoom，鼠标滚轮缩放地图。

可以看出，很多都兼容移动设备的触摸屏，键盘，鼠标事件，这就是OpenLayers 3的改进，跨平台改进。这些功能都是默认添加的，如果要更改默认的选项，需要在相应的选项设置为 false。如果想去掉默认的 DoubleClickZoom 功能，配置如下：

interactions: ol.interaction.defaults([
    doubleClickZoom: false
]),

这样就去除了双击放大功能，去除其他的默认功能，是一样的。

2. draw interaction - 绘图功能

绘图交互允许绘制几何地理要素，可选参数为一个对象，包含参数如下：