OpenLayers - interaction简介 (七)

Interaction是什么

  1. Interaction是用来控制地图的。没看错它和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发,如按钮、链接等;交互功能都是一些设备行为触发,都是不可见的,如鼠标双击、滚轮滑动,手机设备的手指缩放等。
  2. Interaction,是一个虚基类,不负责实例化,交互功能都继承该基类。

常用交互功能

  • doubleclickzoom ,双击地图进行缩放;
  • draganddrop ,以“拖文件到地图中”的交互添加图层;
  • dragbox,拉框,用于划定一个矩形范围,常用于放大地图;
  • dragpan ,拖拽平移地图;
  • dragrotateandzoom,拖拽方式进行缩放和旋转地图;
  • dragrotate ,拖拽方式旋转地图;
  • dragzoom ,拖拽方式缩放地图;
  • draw,绘制地理要素功能;
  • keyboardpan ,键盘方式平移地图;
  • keyboardzoom ,键盘方式缩放地图;
  • select,选择要素功能;
  • modify ,更改要素;
  • mousewheelzoom ,鼠标滚轮缩放功能;
  • pinchrotate,手指旋转地图,针对触摸屏;
  • pinchzoom ,手指进行缩放,针对触摸屏;
  • pointer ,鼠标的用户自定义事件基类;
  • snap,鼠标捕捉,当鼠标距离某个要素一定距离之内,自动吸附到要素。

defaults

默认的交互功能,包含多个交互。规定了默认包含在地图中的功能,他们都是继承自 ol.interaction 类。 主要是最为常用的功能,如缩放、平移和旋转地图等。

  • DragRotate,鼠标拖拽旋转,一般配合一个键盘按键辅助。
  • DragZoom,鼠标拖拽缩放,一般配合一个键盘按键辅助。
  • DoubleClickZoom,鼠标或手指双击缩放地图。
  • PinchRotate,两个手指旋转地图,针对触摸屏。
  • PinchZoom,两个手指缩放地图,针对触摸屏。
  • DragPan,鼠标或手指拖拽平移地图。
  • KeyboardZoom,使用键盘 +- 按键进行缩放。
  • KeyboardPan,使用键盘方向键平移地图。
  • MouseWheelZoom,鼠标滚轮缩放地图。

使用交互功能

  1. 通过map构造参数interactions传入,不传值默认defaults中的交互。
  2. 需要在默认交互基础上继续添加交互,可以使用ol.interaction.defaults().extend([new ol.control.Draw()]) 方法传入。
  3. 也可以利用map对象的addInteraction()方法在地图上添加Interaction对象。

初始化地图

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <style type="text/css">
    .map {
      height: 500px;
      width: 100%;
    }
  style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js">script>
  <body>
    <div id="map" class="map">div>
  body>
  <script>
    var map = new ol.Map({
      target: 'map'
    })

    // 图层
    var layerTile = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
      })
    })
    // 视图
    var view = new ol.View({
      center: ol.proj.fromLonLat([130.41, 28.82]),
      zoom: 4
    })

    map.setView(view)
    map.addLayer(layerTile)
  script>
html>

Draw 使用

  • 负责勾绘交互,支持绘制的图形类型包含 Point(点)、LineString(线)、Polygon(面)和Circle(圆)。
   var source = new ol.source.Vector()
    var draw = new ol.interaction.Draw({
      source: source,
      type: 'Polygon',
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 1)'
        }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#ffcc33'
          })
        })
      })
    })
    map.addInteraction(draw)

DragRotateAndZoom 使用

  • shift + 鼠标拖拽进行缩放和旋转地图
map.addInteraction(new ol.interaction.DragRotateAndZoom())

pointer

  • 监听鼠标的行为按下(Down)、移动(Move)和抬起(Up)事件。
     var pointer = new ol.interaction.Pointer({
      handleDownEvent: (e) => {
        console.log('按下', e.type)
        return true
      },
      handleDragEvent: (e) => {
        console.log('拖拽移动', e.type)
      },
      handleUpEvent: (e) => {
        console.log('拖拽抬起', e.type)
      }
    })
    map.addInteraction(pointer)

总结

OpenLayers提供了很多的交互控件,主要有:缩放、平移拖拽、旋转,为了提高兼容性,除了针对鼠标和键盘的交互,还有针对触摸屏的缩放、旋转和平移拖拽等。在开发中灵活的使用这些交互,可以减少开发时间也可以提升客户满意度。这里只是简单的介绍了交互的作用,要详细了解最好每一个交互都实际使用一下。

你可能感兴趣的:(地图学习,前端,javascript)