5.9 KiB
5.9 KiB
| title | date | author | tags | categories | |||
|---|---|---|---|---|---|---|---|
| interactions | 2020-11-2 | ac |
|
|
1 Interactions
ol中与地图交互相关的类都封装在ol.interaction命名空间下。
在Interactions模块中有一个defaults交互组件对象， 它是Map中默认交互组件的集合。在创建Map实例时，可以添加interactions参数设置默认交互组件的是否加载到Map实例中。这些默认的交互控件，提供基础的地图展示功能。
1.1 Default Interactions
ol/interaction/DragRotate~DragRotate：拖动旋转。按住Shift和Alt键，鼠标拖动地图，会绕当前视图中心旋转。ol/interaction/DoubleClickZoom~DoubleClickZoom：双击放大。按住Shift键双击是缩小。ol/interaction/DragPan~DragPan：拖动地图。ol/interaction/PinchRotate~PinchRotate：允许用户通过两个手指在触摸屏上旋转地图。ol/interaction/PinchZoom~PinchZoom：允许用户通过在触摸屏上用两个手指捏来缩放地图。ol/interaction/KeyboardPan~KeyboardPan：允许用户使用键盘箭头平移地图。请注意，尽管这种交互在默认情况下包含在map中，但只有当浏览器的焦点放在附加键盘事件的元素上时，才能使用这些键。简单点说就是焦点在map上时才可以使用箭头，点击一下map上的放大缩小或attributes属性控件，让可以map获取焦点。ol/interaction/KeyboardZoom~KeyboardZoom：使用数字键盘上的+、-控制地图的缩放（Shift+=+也可以放大）。同样需要map获取焦点后才有效，可以点击map上的放大缩小或attributes属性控件，让可以map获取焦点。ol/interaction/MouseWheelZoom~MouseWheelZoom：允许使用滚轮滑动控制地图缩放。ol/interaction/DragZoom~DragZoom：允许用户通过按Shift键在地图上框选来放大地图。
可以看出默认控件主要功能是地图的导航相关的操作，通过键盘或鼠标对地图进行平移、旋转、缩放等功能。
1.2 数据交互
除了这些默认的交互控件外，ol还提供跟用户在线编辑相关的交互控件，如：
ol/interaction/Draw：用于绘制几何对象的交互控件。ol/interaction/Modify：用于修改要素几何对象的交互控件。必须使用source或feature选项来构建，当要修改已经添加到source中的要素，需要在构造参数option中指定source，当要修改feature集合中的要素时，需要在在构造参数option中指定featuresol/interaction/Select：用于选择矢量要素的交互控件。ol/interaction/Snap：在绘制或修改时，用于捕捉节点的交互工具。
除了默认的交互控件，地图上要新增其它控件需要调用map的addInteraction()方法添加，移除控件调用map的removeInteraction()方法，交互控件只有添加到地图上才有作用。
2 示例
默认交互组件设置：
<!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>