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)
})