OpenLayers - interaction简介（七）

最新推荐文章于 2024-05-21 17:45:23 发布

nie-ny

最新推荐文章于 2024-05-21 17:45:23 发布

阅读量1.7k

点赞数

分类专栏：地图学习文章标签：前端 javascript

本文链接：https://blog.csdn.net/yy729851376/article/details/123031035

版权

地图学习专栏收录该内容

22 篇文章 19 订阅

订阅专栏

OpenLayers提供多种交互功能，包括缩放、平移、旋转、绘制等，支持鼠标和触摸屏操作。例如，Draw用于绘制地理要素，DragRotateAndZoom则允许shift+鼠标拖拽缩放和旋转地图。通过map对象的addInteraction()方法或ol.interaction.defaults().extend()可以添加交互功能。了解并熟练使用这些交互能提升地图应用的用户体验。

摘要由CSDN通过智能技术生成

Interaction是什么

Interaction是用来控制地图的。没看错它和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发，如按钮、链接等；交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动，手机设备的手指缩放等。
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，鼠标滚轮缩放地图。

使用交互功能

通过map构造参数interactions传入，不传值默认defaults中的交互。
需要在默认交互基础上继续添加交互，可以使用ol.interaction.defaults().extend([new ol.control.Draw()]) 方法传入。
也可以利用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>Document</title>
  </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提供了很多的交互控件，主要有：缩放、平移拖拽、旋转，为了提高兼容性，除了针对鼠标和键盘的交互，还有针对触摸屏的缩放、旋转和平移拖拽等。在开发中灵活的使用这些交互，可以减少开发时间也可以提升客户满意度。这里只是简单的介绍了交互的作用，要详细了解最好每一个交互都实际使用一下。

nie-ny

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
OpenLayers - interaction简介（七）

Interaction是什么Interaction是用来控制地图的。没看错它和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发，如按钮、链接等；交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动，手机设备的手指缩放等。Interaction，是一个虚基类，不负责实例化，交互功能都继承该基类。常用交互功能doubleclickzoom ，双击地图进行缩放；draganddrop ，以“拖文件到地图中”的交互添加图层；dragbox，拉框，用于划定一个矩形
复制链接

扫一扫