背景
在官网项目中，需要使用一个地图，展示产品的分布区域及数量。希望的交互是，鼠标放上标点，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,
})
这个设置了之后，我们发现鼠标在地图上是滚不动的状态，就是我们无论如何滚动鼠标，页面都没有动静。其实就是我们的鼠标事件被地图给代理了，但是他这里没有处理我们禁用了缩放和拖拽之后，将鼠标事件脱离代理。
然后我们就开始想解决办法：文章来源：https://www.toymoban.com/news/detail-630070.html
- 在地图上套一层空的蒙层？
这样解决了滚动，但是我们不能影响鼠标的hover效果
所以蒙层这个方案不太可行。。。。。 - 重写鼠标事件
我们去翻API文档，发现了他🈶️抛出鼠标事件的监听回调
我们要用的就是这个鼠标滚动的事件mousewheel，当找到这个事件的第一时间，其实我也是不知道怎么去做的，一直在思考，怎么让它动起来，我能想到使用scrollTop 去做，但是实在想不到每次该改变多少，方向如何。这其实就是因为我不知道deltaY这个属性的存在。最后老大给我说有个属性可以知道鼠标滚动的量，一查就是这玩意儿。前辈果然还是前辈，经验是什么都换不来的。当然还是自己接触的太少了，学习的不够。
最后的解法scrollTop + deltaY：
scene.on('mousewheel', (ev) => {
document.documentElement.scrollTop += ev.originEvent.deltaY
})
小结
以此记录一下这个问题的解决办法，也加深一下自己对这个属性的了解。文章来源地址https://www.toymoban.com/news/detail-630070.html
到了这里，关于antv/l7地图，鼠标滚动，页面正常滑动-- 我们忽略的deltaY的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
