openlayer3实现禁止鼠标滚动缩放地图(附加：实现禁止点击地图放大地图)

首先吐槽一下，网上的资源很多，但是对口的却很少。

控制openlayer地图，禁止使用鼠标滑轮滚动进行缩放地图。根据版本不同，使用的方法也不同。

我现在使用的openlayer3.0版本，使用方式一能解决我的问题。分享下面方式二和方式三方法，供不同版本的小朋友参考。

方式一：

直接说解决方法：

以添加interactions的方式实现禁用鼠标滑轮滚动缩放地图效果(open layer3.0以上版本)

在map对象里添加interactions的设置：

 interactions: ol.interaction.defaults({
         doubleClickZoom: false,// 取消双击放大功能交互
         mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互
         shiftDragZoom: false, // 取消shift+wheel左键拖动交互
     })

代码如下：

    // 我们需要一个vector的layer来放置图标
    var layer = new ol.layer.Vector({
        source : new ol.source.Vector()
    });

    var map = new ol.Map({
    	
        layers : [ new ol.layer.Tile({
            // 加载互联网地图
            source : new ol.source.OSM()
        }), 
        new ol.layer.Tile({
				source: new ol.source.XYZ({
					projection: 'EPSG:4326',
				    url: "XXXXXX"
				})
			}),layer ],
        target : id,
        view : new ol.View({
            projection : 'EPSG:4326',
            center : [ 117.57,33.27 ],
            zoom : 9.5,
         
        }),
  interactions: ol.interaction.defaults({
    	 doubleClickZoom: false,// 取消双击放大功能交互
         mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互
         shiftDragZoom: false, // 取消shift+wheel左键拖动交互
     })
    });

其中mouseWheelZoom: false实现禁用鼠标滑轮缩放地图；

doubleClickZoom: false实现禁用鼠标点击(包含双击)放大地图；

shiftDragZoom: false实现禁用shift+wheel左键拖动地图；

方式二：

最开始使用的方式，当时不知道使用的openlayer是哪一个版本，但肯定不是3.0以上的。我使用控制最大和最小缩放值等于当前地图缩放值。达到禁止使用鼠标滑轮滚动进行缩放地图的目的。

 zoom : 9.5,
 minZoom: 9.5,
 maxZoom:  9.5,

	// 我们需要一个vector的layer来放置图标
    var layer = new ol.layer.Vector({
        source : new ol.source.Vector()
    });

    var map = new ol.Map({
    	
        layers : [ new ol.layer.Tile({
            // 加载互联网地图
            source : new ol.source.OSM()
        }), 
        new ol.layer.Tile({
				source: new ol.source.XYZ({
					projection: 'EPSG:4326',
				    url: "xxxxxx"
				})
			}),layer ],
        target : id,
        view : new ol.View({
            projection : 'EPSG:4326',
            center : [ 117.57,33.27 ],
            zoom : 9.5,
            minZoom: 9.5,
            maxZoom:  9.5,
         
        })
    });

也可以在map对象外，设置minZoom，maxZoom.如下：

 var map = new ol.Map({

        layers : [ new ol.layer.Tile({

            // 加载互联网地图

            source : new ol.source.OSM()

        }),

        new ol.layer.Tile({

source: new ol.source.XYZ({

projection: 'EPSG:4326', url:'xxxxxx,

})

}),layer ],

        target : id,

        view : new ol.View({

            projection : 'EPSG:4326',

            center : [ 117.57,33.27 ],

            zoom : 9.5

        })

    });

 

map.getView().setMinZoom(9.5);

map.getView().setMaxZoom(9.5);

 

方式三：

添加control代码，设置zoomWheelEnabled为false取消鼠标缩放地图。也就是滚动鼠标的滚轮地图没有响应事件，只能用鼠标平移地图。(网上查找的)

                        controls: [

                            new OpenLayers.Control.Navigation({ 'zoomWheelEnabled': false }),

                            new OpenLayers.Control.MousePosition(),

                            new OpenLayers.Control.Zoom()

                        ]

但是我这里使用的时候出现木有Navigation方法。应该是不符合我的当前3.0以上的版本。有需要的小朋友可以参考下

   var map, layer;
        function init(){
            map = new OpenLayers.Map('map',{
                        controls: [
                            new OpenLayers.Control.Navigation({ 'zoomWheelEnabled': false }),
                            new OpenLayers.Control.MousePosition(),
                            new OpenLayers.Control.Zoom()
                        ]
                    }
            );
            layer = new OpenLayers.Layer.OSM("Simple OSM Map");
            map.addLayer(layer);
            map.setCenter(
                new OpenLayers.LonLat(-71.147, 42.472).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 12
            );    
        }

 以上是我总结的方式，大家可以参考和谈论，有不正确的地方还望订正。