leaflet-交互事件
leaflet支持的交互事件及绑定事件示例
·
leaflet支持的交互事件如下:
| 事件 | 数据 | 描述 |
|---|---|---|
click |
MouseEvent |
当用户点击(或点击)地图时触发。 |
dblclick |
MouseEvent |
当用户双击(或双击)地图时触发。 |
mousedown |
MouseEvent |
当用户在地图上按下鼠标按钮时触发。 |
mouseup |
MouseEvent |
当用户在地图上释放鼠标按钮时触发。 |
mouseover |
MouseEvent |
当鼠标进入地图时触发。 |
mouseout |
MouseEvent |
当鼠标离开地图时触发。 |
mousemove |
MouseEvent |
当鼠标在地图上移动时触发。 |
contextmenu |
MouseEvent |
当用户在地图上按下鼠标右键时触发,阻止默认浏览器上下文菜单显示此事件是否有侦听器。当用户按住单次触摸一秒钟(也称为长按)时,也会在移动设备上触发。 |
keypress |
KeyboardEvent |
当用户按下键盘上的一个键时触发,该键在地图获得焦点时产生一个字符值。 |
keydown |
KeyboardEvent |
当用户在地图获得焦点时按下键盘上的键时触发。与keypress事件不同的keydown是,对于产生字符值的键和不产生字符值的键会触发事件。 |
keyup |
KeyboardEvent |
当用户在地图获得焦点时从键盘上释放一个键时触发。 |
preclick |
MouseEvent |
在鼠标点击地图之前触发(当您希望在任何现有点击处理程序开始运行之前点击发生某些事情时,有时很有用)。 |
使用方法示例:
效果:鼠标移入绘制的线上,线的样式修改
移入前效果如下图

代码:
var latlngs = [ //线中点的经纬度点
[38, 0],
[38, 180],
[0, 0]
]
let polyline = L.polyline(latlngs, {//创建一条折线
color: 'red',//线的颜色
weight: 3 ,//线的粗细
// interactive: false,
}).addTo(this.map);//放入地图/图层中
polyline.on('mouseover',(e)=>{//绑定事件
polyline.setStyle({weight:6,color:'green'})
})
绑定事件后,移入鼠标,上图效果变为下图
注:没有绑定移出事件,所以移入修改后样式便不会再改变,完善效果可以添加移出事件,在移出事件中,恢复原样式即可

要点:
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
interactive |
Boolean |
true |
如果false,该层将不会发出鼠标事件,并将充当底层地图的一部分。 |
| 方法 | 退货 | 描述 |
|---|---|---|
setStyle(<Path options> style) |
this |
根据对象中的选项更改路径的外 |
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)