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({
            // 加载互联网地图
          
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers是一款开源的可视化地图库,它提供了丰富的功能和API,可以用于创建交互式地图应用程序。要实现地图阴影效果,你可以按照以下步骤进行操作: 1. 首先,确保你已经引入了OpenLayers库,并创建了一个地图实例。 2. 在地图上添加一个图层用于显示阴影效果。你可以使用OpenLayers的ImageLayer或TileLayer实现。在图层的源中,你可以使用图片或数据源来生成阴影效果。 3. 使用OpenLayers的样式功能,为图层设置阴影效果。你可以使用CSS的box-shadow属性或OpenLayers的Shadow效果来实现。 4. 调整阴影效果的参数,例如颜色、透明度和模糊度,以获得你想要的效果。 5. 最后,将图层添加到地图中,并根据需要调整图层的位置和大小。 通过以上步骤,你就可以在OpenLayers中实现地图阴影效果了。请注意,具体的实现细节可能因OpenLayers的版本而有所不同,所以建议查阅OpenLayers的官方文档或示例来获取更详细的信息和代码示例。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [OpenLayers实现阴影效果](https://blog.csdn.net/qq_29602347/article/details/103179648)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Openlayer 数据可视化开发笔记](https://blog.csdn.net/kingbox000/article/details/103043195)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值