OpenLayers 3 之 地图交互功能(interaction)详解

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

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

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

有问题可以留言评论或者给我发邮件! [email protected]

一、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 - 绘图功能

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

/**
 * @typedef {{features: (ol.Collection.<ol.Feature>|undefined),
 *     source: (ol.source.Vector|undefined),
 *     snapTolerance: (number|undefined),
 *     type: ol.geom.GeometryType,
 *     minPointsPerRing: (number|undefined),
 *     style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
 *     geometryName: (string|undefined),
 *     condition: (ol.events.ConditionType|undefined)}}
 * @api
 */
  • features,绘制的要素的目标集合;
  • source,绘制的要素的目标图层来源,即目标图层的 source属性 ;
  • snapTolerance,自动吸附完成点的像素距离,也就是说当鼠标位置距离闭合点小于该值设置的时候,会自动吸附到闭合点,默认值是 12;
  • type,绘制的地理要素类型,ol.geom.GeometryType类型,包含 PointLineStringPolygonMultiPointMultiLineString 或者 MultiPolygon
  • minPointsPerRing,绘制一个多边形需要的点数最小值,数值类型,默认是 3
  • style,要素素描的样式,是 ol.style.Style对象之一;
  • geometryName,绘制的地理要素的名称,string类型;
  • condition,一个函数,接受一个ol.MapBrowserEvent类型的参数,返回一个布尔值表示是否应该调用事件处理函数。默认情况下,增加一个顶点,类型为 ol.events.ConditionType

给地图添加该交互功能,首先需要实例化一个ol.interaction.Draw,必须指定 sourcetype属性:

    var draw = new ol.interaction.Draw({
      source: source,
      type: "Polygon"
    });

然后将该功能添加到地图中map.addInteraction(draw)

这里我们在页面中添加一个 HTML select 元素,通过选择要素类型,绘制相应的要素类型:

定义一个函数用于添加该交互功能:

var typeSelect = document.getElementById('type');

var draw; // global so we can remove it later
function addInteraction() {
  var value = typeSelect.value;
  if (value !== 'None') {
    draw = new ol.interaction.Draw({
      source: source,
      type: value
    });
    map.addInteraction(draw);
  }
}

绑定select值变化触发的事件:

typeSelect.onchange = function(e) {
  map.removeInteraction(draw);
  addInteraction();
};

最后首先执行绑定函数addInteraction();,然后点击鼠标进行绘制:

OpenLayers 3 之 地图交互功能(interaction)详解_第1张图片

绘制LineString

OpenLayers 3 之 地图交互功能(interaction)详解_第2张图片

绘制Polygon

这里只是使用 LineStringPloygon 做了例子,还有 PointCircle 可以使用。对该类稍微定制,就可以定制绘制的图形,如箭头,这个就可以用于动态标绘系统,使用WFS协议和服务器建立通讯。

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

拖拽实现旋转和缩放地图的功能。首先定义该交互对象:

/* *
 * 定义地图的交互功能
 */
 var interactions = ol.interaction.defaults().extend([
    new ol.interaction.DragRotateAndZoom()
 ]);

然后在 map 中加入交互对象:

OpenLayers 3 之 地图交互功能(interaction)详解_第3张图片

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

      该功能是两个单独功能的合体: dragzoom 和 dragrotate,一个负责拖拽缩放,一个负责拖拽旋转,和以上的功能一样,就不再赘述了。

4. dragbox interaction - 拉框交互

      在地图上拉出一个矩形框,一般配合使用一个辅助按键,如Shift,常用于放大功能。该功能是默认添加在地图中的,默认情况下,按下Shift,然后拖动鼠标拉框,然后地图就会将框内内容放大。

OpenLayers 3 之 地图交互功能(interaction)详解_第4张图片

OpenLayers 3 之 地图交互功能(interaction)详解_第5张图片

5. draganddrop interaction - 拖拽文件到地图

      将空间数据使用鼠标或者手指拖拽到地图中,解析成一个图层添加到地图中。目前只支持矢量数据,未来可能支持更多的空间数据格式。目前,支持的格式包括 GeoJSON, GML, KML, GPX, OSMXML, TopoJSONIGC。首先实例化一个 draganddrop interaction:

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

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

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

      如果想在添加数据的时候定义一些额外行为,比如缩放到添加到数据的范围,需要注册 interaction 的事件-dragAndDropInteraction.on('addfeatures', function(event) {});, 以下为拖拽一个KML文件到地图中:

OpenLayers 3 之 地图交互功能(interaction)详解_第6张图片

OpenLayers 3 之 地图交互功能(interaction)详解_第7张图片

6. keyboard interaction - 键盘交互功能

      包含 ol.interaction.KeyboardZoomol.interaction.KeyboardPan,分别是键盘缩放和键盘平移。默认添加到地图中,但是只有当焦点在包含地图的 HTML 元素上,才可用。可以通过修改 ol.MapkeyboardEventTarget 属性,修改键盘事件的关联 HTML 元素。

  ol.interaction.KeyboardZoom,使用键盘+- 进行地图缩放;ol.interaction.KeyboardPan,使用方向键平移地图。

7. modify 和 select interaction

      select 就像名字暗示的一样,是用来选中要素的;而 modify 是修改要素的,主要是通过拖拽方式修改点的坐标。

OpenLayers 3 之 地图交互功能(interaction)详解_第8张图片

选中后的原图

OpenLayers 3 之 地图交互功能(interaction)详解_第9张图片

拖拽几个点后效果

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

var select = new ol.interaction.Select();
var moddify = new ol.interaction.Modify({
    features:select.getFeatures()
});

features:select.getFeatures()目的为修改选中的要素。 然后将两个交互功能添加到 map 中就可以使用其功能了。

8. pinchrotate ,pinchzoom interaction - 两个手指缩放和旋转地图

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

9. pointer interaction - 自定义鼠标事件

      针对鼠标的行为按下(Down)、移动(Move)和抬起(Up),自定义事件。这三个事件发生有先后顺序,首先是触发按下,之后是移动事件,最后是抬起事件。只要配置相关的属性,包含handleDownEventhandleDragEventhandleMoveEventhandleUpEvent分别对应鼠标的 downdragmoveup四种事件。例如配置鼠标的按下左键事件,当按下鼠标左键时候,就会触发 functionName函数 :

new ol.interaction.Pointer({
    handleDownEvent: functionName
})

10. snap interaction - 鼠标捕捉

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

OpenLayers 3 之 地图交互功能(interaction)详解_第10张图片

再靠近就会吸附到黄色的点

OpenLayers 3 之 地图交互功能(interaction)详解_第11张图片

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

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

三、总结

      交互功能比较多,主要涉及用户与地图交互需要的基本功能:缩放、平移拖拽、旋转,为了提高兼容性,除了针对鼠标和键盘的交互,还有针对触摸屏的缩放、旋转和平移拖拽。

      比较有用的有勾绘draw、选择要素selectmodify、捕捉吸附snap 和 鼠标自定义事件pointer。这些交互功能可以共同构建一个动态标绘系统,在客户端增加或者修改空间数据,提交给服务器,更新数据。

OK,写完了。

有问题可以留言评论或者给我发邮件! [email protected]

你可能感兴趣的:(WebGIS,OpenLayers,OpenLayers)