openlayers之interaction（地图交互功能）

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

在 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，鼠标捕捉，当鼠标距离某个要素一定距离之内，自动吸附到要素。

参考：https://blog.csdn.net/weitaming1/article/details/87805287

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

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，鼠标滚轮缩放地图。

2. draw interaction - 绘图功能

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

• features，绘制的要素的目标集合；
• source，绘制的要素的目标图层来源，即目标图层的 source属性 ；
• snapTolerance，自动吸附完成点的像素距离，也就是说当鼠标位置距离闭合点小于该值设置的时候，会自动吸附到闭合点，默认值是 12;
• type，绘制的地理要素类型，ol.geom.GeometryType类型，包含 Point、 LineString、 Polygon、MultiPoint、MultiLineString 或者 MultiPolygon；
• minPointsPerRing，绘制一个多边形需要的点数最小值，数值类型，默认是 3；
• style，要素素描的样式，是 ol.style.Style对象之一；
• geometryName，绘制的地理要素的名称，string类型；
• condition，一个函数，接受一个ol.MapBrowserEvent类型的参数，返回一个布尔值表示是否应该调用事件处理函数。默认情况下，增加一个顶点，类型为 ol.events.ConditionType。

移除draw：map.removeInteraction(draw);

例子：https://openlayers.org/en/latest/examples/draw-and-modify-features.html

>>【学习笔记之Openlayers3】要素绘制篇（第三篇）：https://blog.csdn.net/u013420816/article/details/54173044

      Openlayers API-Draw：https://www.jianshu.com/p/49ff72db4f7c

 

      OpenLayers 3 之 绘制图形（ol.interaction.Draw）详解：https://blog.csdn.net/qingyafan/article/details/48622467