内置交互方式介绍

OpenLayers 3提供了最基本的地图放大，缩小，平移等功能，以满足用户浏览地图的需要。这些功能都是内置的，实现类都放在包ol.interaction下面，可以通过官网API查询到。在做二次开发的时候，我们无需做任何设置，地图就具有这些功能，比如下面这个最简单的地图，你可以用鼠标对它进行浏览，不管是放大，还是缩小，平移都可以。

这个地图的代码在本教程最开始的时候，就已经见过了：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
    var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });
</script>

虽然代码中没有做任何的设置，ol.Map的默认行为中，设置了和地图的交互方式，如果表示出来，代码是这样的：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
    var map = new ol.Map({
        interactions: ol.interaction.defaults(),  // 不设置的情况下，默认会设置为ol.interaction.defaults()
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });
</script>

ol.interaction.defaults()这个函数用于返回默认的交互方式，通过API文档可知，还可以通过参数控制交互方式，非常的灵活。在进一步深入之前，还是先了解一下默认都提供了那些交互方式：

按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转，对应的交互类为ol.interaction.DragRotate。
用鼠标左键双击地图，就可以放大地图，对应的交互类为ol.interaction.DoubleClickZoom。
用鼠标左键，拖拽地图，就可以平移地图，对应的交互类为ol.interaction.DragPan。
在触摸屏上，用两个手指在触摸屏上旋转，就可以旋转地图，对应的交互类为ol.interaction.PinchRotate。
在触摸屏上，用两个手指在触摸屏上缩放，就可以缩放地图，对应的交互类为ol.interaction.PinchZoom。
用键盘上的上下左右键，就可以平移地图，对应的交互类为ol.interaction.KeyboardPan。
用键盘上的+/-键，就可以缩放地图，对应的交互类为ol.interaction.KeyboardZoom。
滚动鼠标中间的滑轮，就可以缩放地图，对应的交互类为ol.interaction.MouseWheelZoom。
按住shift键，同时用鼠标左键在地图上拖动，就可以放大地图，对应的交互类为ol.interaction.DragZoom。

从上面可以看到，支持的交互方式挺多的，归纳为缩放，平移，旋转三类。同时支持键盘，鼠标，和触屏三种方式。

虽然默认的交互方式很全，但如果我们的地图只是在PC端提供或者只是在触屏提供，那么有些交互方式就会显得多余，最好是去掉不需要的，或者我们的地图因为业务需要，不允许用户平移，或者缩放地图。为了满足这样的需求，ol.interaction.defaults()提供了相应的参数来控制交互方式，详见ol.interaction.defaults API文档。下面简单演示一个不能缩放的地图：

代码如下：

<div id="map2" style="width: 100%"></div>
<script type="text/javascript">
    new ol.Map({
        // 让所有的zoom开关都设置为false
        interactions: ol.interaction.defaults({
            doubleClickZoom: false,
            mouseWheelZoom: false,
            shiftDragZoom: false,
            pinchZoom:false
        }),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map2',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });
</script>

有时候也需要设置地图不能旋转，只要设置altShiftDragRotate:false, pinchRotate:false即可，可自行验证。

注意事项

细心的读者有可能已经发现了，前面的第一个地图，我们并没有做任何的限制，但是用键盘控制鼠标平移和缩放，是不行的。原因在于地图使用的target获取不到键盘事件，我们需要做个简单的设置才行：

代码如下：

<!--注意：需要设置tabindex，才能使div获得键盘事件-->
<div id="map3" tabindex="0" style="width: 100%"></div>
<script type="text/javascript">
    new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map3',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });
</script>