antv/l7地图,鼠标滚动,页面正常滑动-- 我们忽略的deltaY
背景
在官网项目中,需要使用一个地图,展示产品的分布区域及数量。希望的交互是,鼠标放上标点,tooltip展示地点和数量等信息。鼠标滚动,则页面随着滚动。但是鼠标事件是被地图代理了的,鼠标滚动意味着地图的缩放。

问题解决
我们首先想到的就是关闭地图的缩放
const scene = new Scene({id: 'map',map: new GaodeMap({zIndex: 0,pitch: 0,style: 'light',center: [36.753416,33.142173],zoom: 1,rotateEnable: false,zoomEnable: false, // 关闭地图缩放dragEnable: false // 关闭拖拽}),logoVisible: false,})
这个设置了之后,我们发现鼠标在地图上是滚不动的状态,就是我们无论如何滚动鼠标,页面都没有动静。其实就是我们的鼠标事件被地图给代理了,但是他这里没有处理我们禁用了缩放和拖拽之后,将鼠标事件脱离代理。
然后我们就开始想解决办法:
- 在地图上套一层空的蒙层?
这样解决了滚动,但是我们不能影响鼠标的hover效果

所以蒙层这个方案不太可行。。。。。 - 重写鼠标事件
我们去翻API文档,发现了他🈶️抛出鼠标事件的监听回调

我们要用的就是这个鼠标滚动的事件mousewheel,当找到这个事件的第一时间,其实我也是不知道怎么去做的,一直在思考,怎么让它动起来,我能想到使用scrollTop 去做,但是实在想不到每次该改变多少,方向如何。这其实就是因为我不知道deltaY这个属性的存在。最后老大给我说有个属性可以知道鼠标滚动的量,一查就是这玩意儿。前辈果然还是前辈,经验是什么都换不来的。当然还是自己接触的太少了,学习的不够。

最后的解法scrollTop + deltaY:
scene.on('mousewheel', (ev) => {document.documentElement.scrollTop += ev.originEvent.deltaY})
小结
以此记录一下这个问题的解决办法,也加深一下自己对这个属性的了解。
相关文章:
antv/l7地图,鼠标滚动,页面正常滑动-- 我们忽略的deltaY
背景 在官网项目中,需要使用一个地图,展示产品的分布区域及数量。希望的交互是,鼠标放上标点,tooltip展示地点和数量等信息。鼠标滚动,则页面随着滚动。但是鼠标事件是被地图代理了的,鼠标滚动意味着地图的…...
再续AM335x经典,米尔TI AM62x核心板上市,赋能新一代HMI
近十年来,AM335x芯片作为TI经典工业MPU产品,在工业处理器市场占据主流地位,其凭借GPMC高速并口、PRU协处理器等个性化硬件资源,在工业控制、能源电力、轨道交通、智慧医疗等领域广受用户欢迎。随着信息技术的快速发展,…...
springboot和Django哪一个做web服务器框架更好
目录 一、两者特点 二、各自优势 一、两者特点 编程语言: Spring Boot:使用 Java 编程语言。Django:使用 Python 编程语言。 生态系统和社区支持: Spring Boot:具有庞大的 Java 生态系统和强大的社区支持。适用于大型…...
C#核心知识回顾——21.归并排序
理解递归逻辑 一开始不会执行sort函数的 要先找到最小容量数组时 才会回头递归调用Sort进行排序 基本原理 归并 递归 合并 数组分左右 左右元素相比较 一侧用完放对面 不停放入新数组 递归不停分 分…...
基于netty的rpc远程调用
QPRC 🚀🚀🚀这是一个手写RPC项目,用于实现远程过程调用(RPC)通信🚀🚀🚀 欢迎star串门:https://github.com/red-velet/ 🚀Q-PRC 一、功能特性 …...
RabbitMQ输出日志配置
参考地址rabbitmq启用日志功能记录消息队列收发情况_rabbitmq开启日志_普通网友的博客-CSDN博客 启用日志插件命令 # 设置用户权限 rabbitmqctl set_user_tags mqtt-user administrator rabbitmqctl set_permissions -p / mqtt-user ".*" ".*" ".*&…...
解决一个Sqoop抽数慢的问题,yarn的ATSv2嵌入式HBASE崩溃引起
新搭建的一个Hadoop环境,用Sqoop批量抽数的时候发现特别慢,我们正常情况下是一个表一分钟左右,批量抽十几个表,也就是10分钟的样子,结果发现用了2个小时: 查看yarn日志 发现有如下情况: 主要有两…...
为Android构建现代应用——应用导航设计
在前一章节的实现中,Skeleton: Main structure,我们留下了几个 Jetpack 架构组件,这些组件将在本章中使用,例如 Composables、ViewModels、Navigation 和 Hilt。此外,我们还通过 Scaffold 集成了 TopAppBar 和 BottomA…...
聊聊 Docker 和 Dockerfile
目录 一、前言 二、了解Dockerfile 三、Dockerfile 指令 四、多阶段构建 五、Dockerfile 高级用法 六、小结 一、前言 对于开发人员来说,会Docker而不知道Dockerfile等于不会Docker,上一篇文章带大家学习了Docker的基本使用方法:《一文…...
element表格+表单+表单验证结合u
一、结果展示 1、图片 2、描述 table中放form表单,放输入框或下拉框或多选框等; 点击添加按钮,首先验证表单,如果存在没填的就验证提醒,都填了就向下添加一行表单表格; 点击当前行删除按钮,…...
数据库:MYSQL参数max_allowed_packet 介绍
1、参数作用 max_allowed_packet参数是指mysql服务器端和客户端在一次传送数据包的过程当中最大允许的数据包大小。如果超过了设置的最大长度,则会数据库保持数据失败。 2、问题场景 ● 有时候业务的需要,可能会存在某些字段数据长度非常大(比如富文本编辑器里面的内容),…...
基于DiscordMidjourney API接口实现文生图
https://discord.com/api/v9/interactions 请求头: authorization:取自 浏览器中discord 文生图请求头中的 authorization 的值 Content-Type:application/json 请求体: {“type”:2,“application_id”:“93692956130267xxxx”,“guild_id”:“1135900…...
springboot+vue农产品特产商城销售平台_50kf2 多商家
随着我国经济的高速发展与人们生活水平的日益提高,人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下,人们更趋向于足不出户解决生活上的问题,南阳特产销售平台展现了其蓬勃生命力和广阔的前景。与此同时,为解决…...
【深度学习_TensorFlow】感知机、全连接层、神经网络
写在前面 感知机、全连接层、神经网络是什么意思? 感知机: 是最简单的神经网络结构,可以对线性可分的数据进行分类。 全连接层: 是神经网络中的一种层结构,每个神经元与上一层的所有神经元相连接,实现全连接。 神经…...
软件测试(功能、接口、性能、自动化)详解
一、软件测试功能测试 测试用例编写是软件测试的基本技能;也有很多人认为测试用例是软件测试的核心;软件测试中最重要的是设计和生成有效的测试用例;测试用例是测试工作的指导,是软件测试的必须遵守的准则。 黑盒测试常见测试用…...
Oracle表段中的高水位线HWM
在Oracle数据的存储中,可以把存储空间想象为一个水库,数据想象为水库中的水。水库中的水的位置有一条线叫做水位线,在Oracle中,这条线被称为高水位线(High-warter mark, HWM)。在数据库表刚建立的时候&…...
【福建事业单位-推理判断】03类别推理
【福建事业单位-推理判断】03类别推理 一、类别推理1.1语义关系考点一、近义反义关系(不需要严格的,意思相近即可)近义反义的二级辨析(感情色彩)考点二:比喻义、象征义 1.2 逻辑关系1.2.1全同关系ÿ…...
Leetcode-每日一题【剑指 Offer 05. 替换空格】
题目 请实现一个函数,把字符串 s 中的每个空格替换成"%20"。 示例 1: 输入:s "We are happy."输出:"We%20are%20happy." 限制: 0 < s 的长度 < 10000 解题思路 前置知识 Str…...
zookeeper+kafka分布式消息队列集群的部署
目录 一、zookeeper 1.Zookeeper 定义 2.Zookeeper 工作机制 3.Zookeeper 特点 4.Zookeeper 数据结构 5.Zookeeper 应用场景 (1)统一命名服务 (2)统一配置管理 (3)统一集群管理 (4&…...
VR全景旅游,智慧文旅发展新趋势!
引言: VR全景旅游正在带领我们踏上一场全新的旅行体验。这种沉浸式的旅行方式,让我们可以足不出户,却又身临其境地感受世界各地的美景。 一.VR全景旅游是什么? VR全景旅游是一种借助虚拟现实技术,让用户…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
git: early EOF
macOS报错: Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...
恶补电源:1.电桥
一、元器件的选择 搜索并选择电桥,再multisim中选择FWB,就有各种型号的电桥: 电桥是用来干嘛的呢? 它是一个由四个二极管搭成的“桥梁”形状的电路,用来把交流电(AC)变成直流电(DC)。…...
