openLayers交互

openLayers点击事件

interaction

interaction是一个虚基类，不负责实例化，交互功能都继承该基类， 功能如下：

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

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

很多事件都兼容移动设备的触摸屏，键盘，鼠标事件，如果要更改默认的选项，需要在相应的选项设置为 false。如果想去掉默认的 DoubleClickZoom 功能，配置如下：

interactions: interaction.defaults({
            doubleClickZoom: false, // 关闭双击缩放
            mouseWheelZoom: false // 关闭滚轮缩放
        })

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

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。

给地图添加该交互功能，首先需要实例化一个ol.interaction.Draw，必须指定 source和type属性：

    const draw = new interaction.Draw({
        source,			// 绘制图形的图层源 没有时可设置为layers下的new TileLayer配置项的source
        type: "Polygon" // 添加的绘图类型
    });
    
    map.addInteraction(draw) // 添加绘制功能到图层
    // map.removeInteraction(draw) // 从图层移除绘制功能

dragrotateandzoom interaction - 鼠标拖拽进行缩放和旋转地图

interactions:interaction.defaults().extend([
            new interaction.DragRotateAndZoom()
        ])

设置配置项的interactions为interaction.DragRotateAndZoom()可以通过拖拽实现旋转和缩放地图的功能

这个功能的使用方法是首先按住键盘的 shift 按钮，然后使用鼠标点住地图一点，然后拖拽鼠标围绕地图中心旋转，地图就会旋转相应的角度；如果拖拽鼠标远离地图中心，就会实现地图的放大，靠近地图中心，地图就会缩小。

该功能是两个单独功能的合体： dragzoom 和 dragrotate，一个负责拖拽缩放，一个负责拖拽旋转

dragbox interaction - 拉框交互

在地图上拉出一个矩形框，一般配合使用一个辅助按键，如Shift，常用于放大功能，该功能是默认添加在地图中的。

没有其他功能冲突的默认情况下(如上面dragrotateandzoom interaction拖拽缩放)，按下Shift，然后拖动鼠标拉框，然后地图就会将框内内容放大。

draganddrop interaction - 拖拽文件到地图

将空间数据使用鼠标或者手指拖拽到地图中，解析成一个图层添加到地图中。

目前只支持矢量数据，未来可能支持更多的空间数据格式。

支持的格式包括 GeoJSON、GML、 KML、 GPX、 OSMXML、 TopoJSON、 IGC。

首先实例化一个 draganddropinteraction：

var dragAndDropInteraction = new ol.interaction.DragAndDrop({
  formatConstructors: [
    ol.format.GeoJSON,
    ol.format
  ]
})

formatConstructors 表示想要支持的格式，这里我选择了支持两种常见的格式：GeoJSON 和 KML，然后将该交互添加到地图中：

 var interactions = ol.interaction.defaults().extend([
    new ol.interaction.DragRotateAndZoom(),
    dragAndDropInteraction
 ])

如果想在添加数据的时候定义一些额外行为，比如缩放到添加到数据的范围，需要注册 interaction 的事件dragAndDropInteraction.on('addfeatures', function(event) {})

keyboard interaction - 键盘交互功能

包含 ol.interaction.KeyboardZoom 和 ol.interaction.KeyboardPan，分别是键盘缩放和键盘平移。

默认添加到地图中，但是只有当焦点在包含地图的 HTML 元素上，才可用。

可以通过修改 ol.Map 的 keyboardEventTarget 属性，修改键盘事件的关联 HTML 元素。

ol.interaction.KeyboardZoom，使用键盘+ 和 - 进行地图缩放

ol.interaction.KeyboardPan，使用方向键平移地图

modify 和 select interaction

select是用来选中要素的，而 modify 是修改要素的，主要是通过拖拽方式修改点的坐标

模拟选中并修改要素的交互功能需要添加如下代码：

 /*select*/   ol.interaction.Select();
 /*moddify*/   ol.interaction.Modify({
    features:select.getFeatures()
});

features:select.getFeatures()目的为修改选中的要素。

然后将两个交互功能添加到 map 中就可以使用其功能了

pinchrotate ，pinchzoom interaction - 两个手指缩放和旋转地图

这两个功能针对触摸屏，两个手指按住地图，增减距离来实现缩放，旋转手指，地图跟着旋转。默认添加到地图中。

pointer interaction - 自定义鼠标事件

针对鼠标的行为按下Down、移动Move和抬起Up，自定义事件。

这三个事件发生有先后顺序，首先是触发按下，之后是移动事件，最后是抬起事件。

只要配置相关的属性，包含handleDownEvent，handleDragEvent，handleMoveEvent

handleUpEvent分别对应鼠标的 down、drag、move和up四种事件。

例如配置鼠标的按下左键事件，当按下鼠标左键时候，就会触发 fun函数 ：

 .interaction.Pointer({
    handleDownEvent: fun
})

snap interaction - 鼠标捕捉

当修改和绘制矢量要素时，鼠标距离某个要素一定距离之内，自动吸附到要素。

可以配置的选项有 具有捕捉吸附功能的要素集 或者 矢量图层，发生捕捉的最大距离（像素为单位），使用方法如下：

new ol.interaction.Snap({
    features: 要素集(ol.Collection),
    pixelTolerance: 捕捉发生的距离，像素数，
    source: 具有捕捉功能的图层(ol.source.Vector)
})