OpenLayers 之 地图交互功能（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类型，包含 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属性：

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

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

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

<select id="type">
  <option value="None">None</option>
  <option value="LineString">LineString</option>
  <option value="Polygon">Polygon</option>
</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();，然后点击鼠标进行绘制：

绘制LineString

绘制Polygon

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

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

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

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

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

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

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

4. dragbox interaction - 拉框交互

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

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

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

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

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

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

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

6. keyboard interaction - 键盘交互功能

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

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

7. modify 和 select interaction

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

选中后的原图

拖拽几个点后效果

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

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），自定义事件。这三个事件发生有先后顺序，首先是触发按下，之后是移动事件，最后是抬起事件。只要配置相关的属性，包含handleDownEvent，handleDragEvent，handleMoveEvent，handleUpEvent分别对应鼠标的 down、drag、move和up四种事件。例如配置鼠标的按下左键事件，当按下鼠标左键时候，就会触发 functionName函数 ：

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

10. snap interaction - 鼠标捕捉

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

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

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

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

三、总结

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

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

OK，写完了。

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

时间： 2024-10-11 22:00:26

OpenLayers 之 地图交互功能（interaction）详解的相关文章

IOS-TextField功能方法详解

//初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式,只有设置了才会显示边框样式 text.borderStyle = UITextBorderStyleRoundedRect; typedef enum { UITextBorderStyleNone, UITextBorderStyleLine, UITextBord

（转载）C语言单链表实现19个功能完全详解

最近在复习数据结构,想把数据结构里面涉及的都自己实现一下,完全是用C语言实现的. 自己编写的不是很好,大家可以参考,有错误希望帮忙指正,现在正处于编写阶段,一共将要实现19个功能.到目前我只写了一半,先传上来,大家有兴趣的可以帮忙指正,谢谢 在vs2010上面编译运行无错误. 每天都会把我写的新代码添加到这个里面.直到此链表完成. #include "stdafx.h" #include "stdio.h" #include <stdlib.h> #in

HP电脑的增霸卡功能操作详解

机房管理中HP电脑的增霸卡功能操作详解 一.软件去除保护 1).电脑开机后等待进入增霸卡选择系统界面: 2).按F1帮助,F10进入增霸卡BIOS界面: 3).光标切换到>>>系统还原模式,模式有:(不保护.每次.周.月.),选择不保护:(如果第四步可操作,则省略这一步操作) 4).光标切换到>>>磁盘工具,选择要进行操作的系统的启动盘,选择保护模式,模式有:(保护.不保护),选择"不保护":(如果保护模式不可操作,则进行第三步操作) 5).保存,重

Android研究之手势交互实例实现详解

 先来几张效果图: 一.没有抛掷: 二.向右抛掷一次 三.向右再抛掷一次 接下来说说Android开发中对于手势动作的识别参考资料... 首先,在Android系统中,每一次手势交互都会依照以下顺序执行. 1. 接触接触屏一刹那,触发一个MotionEvent事件. 2. 该事件被OnTouchListener监听,在其onTouch()方法里获得该MotionEvent对象. 3. 通过GestureDetector(手势识别器)转发次MotionEvent对象至OnGestureList

OpenLayers 之 视图（View） 详解

初始化一幅地图,必备的三要素之一就是视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率.地图的旋转等控制.也就是说每个 map对象包含一个 view对象部分,用于控制与用户的交互. 主要介绍 view 的作用和用法,并分析商用的地图应用中的相关的功能.功能的具体的实现与如何进行定制和优化,就超过了这篇文章的范围了. view 类的定义可以在 GitHub 的 OpenLayers 项目中的 这里 看到,我就不贴大篇幅的代码了,只是针对特定的点贴一下核心代码,需要看完整源码

C++ list容器系列功能函数详解

C++ list函数详解 首先说下eclipse工具下怎样debug:方法:你先要设置好断点,然后以Debug方式启动你的应用程序,不要用run的方式,当程序运行到你的断点位置时就会停住,也会提示你进入到Debug视图方式操作,F5是进入到函数或语句块的内部,F6是单步运行,一行一行的走,F7可以跳当前监听函数或语句块F8 会直接跳到下个断点. 下面进入主题: 一.构造.析构函数.= 运算符 1.功能:声明list容器.4种方式 list<int> first;                

jQuery.Autocomplete实现自动完成功能（详解）

2.jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表. 2) width (Number) 指定下拉框的宽度,Default: input元素的宽度 3)

jmeter的基本功能使用详解

jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简 单.因为jmeter是java开发的,所以运行的时候必须先要安装jdk才可以.jmeter是免安装的,拿到安装包之后直接解压就可以使用,同时它在 linux/windows/macos上都可以使用. ??jmeter可以做接口测试和压力测试.其中接口测试的简单操作包括做http脚本(发get/post请求.加cookie.加header.加权 限认证.上传文

redmine邮件发送功能配置详解

redmine的邮件发送功能还是很有用的. 像项目有更新啦,任务分配啦,都能邮件发送的相关责任人. 我自己在linux服务器上安装并启动了redmine后,邮件一直发送了不了. 查了网上的资料,都是讲修改下配置文件就可以了,他们没错,只是没有讲全. 下面是我整理的一个redmine邮件发送功能设置的一个完整流程. 1. sendmail安装与检查 linux机器上安装的redmine要能发送邮件,先得是本机的sendmail功能是正常的. 查看sendmail进程是否已正常启动: $ ps au