MapBox鼠标移入地图要素上，形状变更为手指

每一个图层添加的时候，都可以调用一下这个函数，id为图层添加时的图层id,监听地图的鼠标移入移出事件。preventDefault用来阻止其他默认事件，获取features ，如果有要素，就变为手指，移出时变回拖拽的手掌。

    // 添加鼠标交互addMouseReact (id) {const self = thisthis.map.on('mousemove', id, (e) => {e.preventDefault()const features = self.map.queryRenderedFeatures(e.point, {layers: [id]})if (features.length > 0) {self.map.getCanvas().style.cursor = 'pointer'}})this.map.on('mouseleave', id, (e) => {self.map.getCanvas().style.cursor = 'grab'})},

MapBox鼠标移入地图要素上，形状变更为手指相关推荐

如何使用mapbox选择拾取地图要素
如何使用mapbox选择拾取地图要素前言需要引入的js.css 如何加载地图如何使用地图空间选择要素效果 demo下载地址前言你好! 最近在研究地图元素和客户端交互的方法,我将项目中的应用 ...
鼠标移入table背景色改变
如果存在单元格合并,当鼠标移入同一组的其他行数据,背景色只会标注到本行,如图: 我想把序号2,姓名李四列等同样标注上. 当鼠标移入序号2上,如图: 我想把序号2所占的3行全部标记上. 目前是通过jq来 ...
【MAPBOX基础功能】19、mapbox修改鼠标在地图上的样式
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
html中鼠标移动在标签上出现小手形状
对于很多标签来说,在实现点击事件或者其他的事件的时候最好鼠标移到标签上要实现光标变为小手形状,可以实现的方式如下: 通过CSS样式实现: <div style="cursor: poi ...
Cesium鼠标移入或悬停在某些铯对象上时更改鼠标箭头为手势
添加鼠标移入监听事件,以下为在vue项目中实现: //MapModelClickEvent.js:地图监听工具 //鼠标移入监听事件 function mouseMoveEvent(viewer, c ...
【MAPBOX基础功能】07、mapbox添加跟随地图的自定义面板到地图上
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
Map点击地图要素获取要素信息
首先要知道的是我们给每一个图层添加到地图上面的时候,都会有一个专属的ID,例如下图中的 ID都是专属的,然后我们就可以为地图添加事件了,有的可能是click,有的可能要移入鼠标就要展示,展示的情况可以 ...
axure 鼠标变成手,Axure教程｜鼠标移入移出自动显示与隐藏三级菜单
前几天因工作需要做一个鼠标移入显示隐藏菜单,鼠标移出自动隐藏菜单, 做的时候觉得没有什么问题,做完后预览就发现一个很严重的问题,就是鼠标移出一级菜单向二级菜单时二级菜单不显示,或者二级菜单显示三级菜单 ...
给元素设置鼠标移入后变为手型的属性
给元素设置鼠标移入后变为手型的属性鼠标移到该元素上时形状变为小手 cursor: pointer; 举例 <style>div{cursor: pointer;} </style& ...

MapBox鼠标移入地图要素上，形状变更为手指

MapBox鼠标移入地图要素上，形状变更为手指相关推荐

最新文章

热门文章