OL的地图事件

Snake8859 12/24/2022

# 地图交互

ol中与地图交互相关的类都封装在ol.interaction命名空间下。

在Interactions模块中有一个defaults交互组件对象，它是Map中默认交互组件的集合。在创建Map实例时，可以添加interactions参数设置默认交互组件的是否加载到Map实例中。这些默认的交互控件，提供基础的地图展示功能。

ol/interaction/DragRotate~DragRotate (opens new window) (opens new window)：拖动旋转。按住Shift和Alt键，鼠标拖动地图，会绕当前视图中心旋转。
ol/interaction/DoubleClickZoom~DoubleClickZoom (opens new window) (opens new window)：双击放大。按住Shift键双击是缩小。
ol/interaction/DragPan~DragPan (opens new window) (opens new window)：拖动地图。
ol/interaction/PinchRotate~PinchRotate (opens new window) (opens new window)：允许用户通过两个手指在触摸屏上旋转地图。
ol/interaction/PinchZoom~PinchZoom (opens new window) (opens new window)：允许用户通过在触摸屏上用两个手指捏来缩放地图。
ol/interaction/KeyboardPan~KeyboardPan (opens new window) (opens new window)：允许用户使用键盘箭头平移地图。请注意，尽管这种交互在默认情况下包含在map中，但只有当浏览器的焦点放在附加键盘事件的元素上时，才能使用这些键。简单点说就是焦点在map上时才可以使用箭头，点击一下map上的放大缩小或attributes属性控件，让可以map获取焦点。
ol/interaction/KeyboardZoom~KeyboardZoom (opens new window) (opens new window)：使用数字键盘上的+、-控制地图的缩放（Shift+=+也可以放大）。同样需要map获取焦点后才有效，可以点击map上的放大缩小或attributes属性控件，让可以map获取焦点。
ol/interaction/MouseWheelZoom~MouseWheelZoom (opens new window) (opens new window)：允许使用滚轮滑动控制地图缩放。
ol/interaction/DragZoom~DragZoom (opens new window) (opens new window)：允许用户通过按Shift键在地图上框选来放大地图。

默认交互组件设置：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="lib/ol.js"></script>
    <title>OpenLayers example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([37.41, 8.82]),
                zoom: 4
            }),
            interactions:new ol.interaction.defaults({
                'altShiftDragRotate': true,//是否允许按住Alt-Shift，拖动地图进行旋转
                'onFocusOnly':false, //是否只有map所在的html元素获取焦点时才可以使用滚轮缩放地图和拖动地图
                'doubleClickZoom':true,
                'keyboard':true,//在map聚焦的情况下可以使用键盘上的"-"缩小地图，shift+"+"放大地图，按"↑"、"↓"、"←"、"→"键平移地图
                'mouseWheelZoom':false,//是否可以使用鼠标滑轮进行缩放
                'shiftDragZoom':true,//是否按住shift加拖动的方式放大地图(拖动的区域)
                'dragPan':false,//是否可以拖动地图
                'pinchRotate':true,//是否允许用户使用两个手指【旋转】地图(移动端用的到)
                'pinchZoom':true,//是否允许用户使用两个手指【缩放】地图(移动端用的到)
                // 'zoomDuration':500 //缩放的动画时间
            })
        });

    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

可以看出默认控件主要功能是地图的导航相关的操作，通过键盘或鼠标对地图进行平移、旋转、缩放等功能。

# 编辑交互

除了这些默认的交互控件外，ol还提供跟用户在线编辑相关的交互控件，如：

ol/interaction/Draw (opens new window) (opens new window)：用于绘制几何对象的交互控件。
ol/interaction/Modify (opens new window) (opens new window)：用于修改要素几何对象的交互控件。必须使用source或feature选项来构建，当要修改已经添加到source中的要素，需要在构造参数option中指定source，当要修改feature集合中的要素时，需要在在构造参数option中指定features
ol/interaction/Select (opens new window) (opens new window)：用于选择矢量要素的交互控件。
ol/interaction/Snap (opens new window) (opens new window)：在绘制或修改时，用于捕捉节点的交互工具。

ol在客户端（浏览器）可以通过Draw交互对象在map中绘制几何图形。初始化Draw对象时，在构造参数options中指定type参数和用于存储所绘制图形的数据源source即可，但type类型必须是'Point', 'LineString', 'LinearRing', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'GeometryCollection', 'Circle'中的类型。当然在Draw中也提供了一些方法用于绘制自定义图形。

与Draw绘制对象对应的有一个ol/interaction/Draw~DrawEvent事件类来处理绘制交互过程中的事件，如：

drawstart：开始绘制要素时触发
drawend：绘制结束后触发

如果需要对客户端绘制的图层或要素服务提供的图层进行修改，我们可以使用ol中的modify交互对象完成这类需求。跟Draw对象类似，初始化Modify实例时，需要在构造参数中使用source或features指定数据源或要素集合。将Modify实例添加到map上后就可以修改指定的要素了。通常跟snap交互控件一起使用，方便捕捉几何图形的顶点进行修改。

OL的控件 OL的常见功能实现