openlayers 入门教程（七）：Interactions 篇_openlayers中keyboardpan

作者：我家小花儿 | 2024-05-22 08:49:11

踩

openlayers中keyboardpan

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

在这里插入图片描述

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

Interaction是用来控制地图的，和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发，如按钮、链接等，而交互功能不可见的，如鼠标双击、滚轮滑动，手机设备的手指缩放等。
在这里插入图片描述

一、交互功能

• draw，绘制地理要素功能；
• select，选择要素功能；
• modify ，更改要素；
• doubleclickzoom ，双击地图进行缩放；
• draganddrop ，以“拖文件到地图中”的交互添加图层；
• dragbox，拉框，用于划定一个矩形范围，常用于放大地图；
• dragpan ，拖拽平移地图；
• dragrotateandzoom，拖拽方式进行缩放和旋转地图；
• dragrotate ，拖拽方式旋转地图；
• dragzoom ，拖拽方式缩放地图；
• keyboardpan ，键盘方式平移地图；
• keyboardzoom ，键盘方式缩放地图；
• 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对象。