Interaction交互

交互（Interaction）是指用户通过鼠标、键盘、触屏等方式对地图进行平移、旋转、缩放等一些交互行为；
OpenLayers提供了最基本的地图放大、缩小、平移等功能，这些基本的操作功能都是默认内置的，二次开发的时候不需要进行额外设置。
另外，还有一些需要设置才可以生效的交互行为，比如：移动要素、绘制图形等；

默认交互

// 地图
var map = new ol.Map({
    interactions: ol.interaction.defaults({
        onFocusOnly: true,
        altShiftDragRotate: false,    // alt+shift拖拽旋转
        pinchRotate: false,    // 双指触屏转动实现旋转
        doubleClickZoom: false,    // 双击缩放
        mouseWheelZoom: false,    // 鼠标滚轮缩放
        shiftDragZoom: false,    // shift拖拽缩放
        pinchZoom: false,    // 双指触屏夹开实现缩放
        dragPan: false,    // 平移 
        keyboard: false,    // 键盘操作
        zoomDelta: 3,    //    使用键盘或双击缩放时的缩放级别增量
        zoomDuration: 5000,    // 缩放动画的持续时间（毫秒）
    }),
    layers:[gaodeTileLayer,layerChinaSimple,layerDraw],
    view: new ol.View({
        center: [117.020847,36.670086],
        maxZoom: 19,
        zoom: 5,
        projection: 'EPSG:4326'
    }),
    target: 'map'
});

Translate移动要素

Interaction for translating (moving) features.
用于移动要素的交互；
官方示例：https://openlayers.org/en/latest/examples/translate-features.html

移动对象可以是要素features也可以是图层layers，但两者不能同时存在；
hitTolerance属性是用于设置触发范围

主要代码：

// 创建移动交互对象
var translate = new ol.interaction.Translate({
    features: new ol.Collection([featureIcon1]),
    //layers: [layerChinaSimple],
    //hitTolerance: 100    // 触发范围：在要素100像素的半径圆内都可以触发
})
// 地图添加交互行为
map.addInteraction(translate);
// 交互对象的触发事件
translate.on('translatestart',function(e){
    $("#message1").text("开始移动!"); 
});
translate.on('translating',function(e){
    $("#message1").text("正在移动!"); 
});
translate.on('translateend',function(e){
    $("#message1").text("结束移动!"); 
});

Draw绘制要素图形

Interaction for drawing feature geometries.
绘制要素几何图形的交互
官方示例：https://openlayers.org/en/latest/examples/draw-features.html?q=draw
绘制其他图形参考官方示例：https://openlayers.org/en/latest/examples/draw-shapes.html?q=draw

type可以是'Point''LineString''Polygon''Circle'，用于绘制几何图形点、线、面、圆
geometryFunction可以绘制其他图形，其中ol.interaction.Draw.createBox()用于绘制矩形，ol.interaction.Draw.createRegularPolygon()用于绘制规则多边形，createRegularPolygon(4)则是正方形；注意使用geometryFunction时，type属性应该是Circle

主要代码：

// 创建绘制交互对象
var draw = new ol.interaction.Draw({
    source: sourceDraw,
    type: 'Circle'    // 'Point''LineString''Polygon''Circle'
    geometryFunction: ol.interaction.Draw.createBox()    // createRegularPolygon()
})
// 地图添加交互行为
map.addInteraction(draw);
// 交互对象的触发事件
draw.on('drawstart',function(e){
    $("#message").text("开始绘制!"); 
});
draw.on('drawend',function(e){
    $("#message").text("结束绘制!"); 
});

Snap捕捉

Handles snapping of vector features while modifying or drawing them.
在修改或绘制矢量要素时实现矢量要素的捕捉交互
官方示例：https://openlayers.org/en/latest/examples/snap.html?q=draw

主要代码：

// 创建捕捉交互对象
var snap = new ol.interaction.Snap({
    source: sourceDraw,
})

// 地图添加交互行为
map.addInteraction(snap);