当某个控制按钮被按下时,我想修改默认的光标图标。我在容器 div 上使用 css 部分地成功了,但这会覆盖移动光标状态,这不是我想要的。我的意思是,在移动地图时(但不是在标记上),移动图标不再出现。
我想知道是否有一种非 hacky 的方式通过 api 实现特殊的光标行为,而不需要重新定义所有内容。
这是我尝试做的事情,#map 是 leaflet 地图的容器 div。
#map[control=pressed] {
cursor: url('..custom.png');
}
当某个控制按钮被按下时,我想修改默认的光标图标。我在容器 div 上使用 css 部分地成功了,但这会覆盖移动光标状态,这不是我想要的。我的意思是,在移动地图时(但不是在标记上),移动图标不再出现。
我想知道是否有一种非 hacky 的方式通过 api 实现特殊的光标行为,而不需要重新定义所有内容。
这是我尝试做的事情,#map 是 leaflet 地图的容器 div。
#map[control=pressed] {
cursor: url('..custom.png');
}
编辑5.18.2017:通过Leaflet框架使用原始CSS和Javascript(推荐)
我正在查看BoxZoom插件的源代码,并注意到他们使用Leaflet内置的DOM mutators来实现,并想在此提倡它...这肯定是最佳实践。
在您的CSS中包含类似于以下内容的类。
.leaflet-container.crosshair-cursor-enabled {
cursor:crosshair;
}
当你想启用十字准线时,请在你的JS中执行以下操作。
// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');
然后,当你想禁用十字准线时,在你的JS中执行以下操作。
L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');
翻译后的内容: 地图级别的十字线
@scud42把我引导到了正确的路径。您可以使用JQuery来更改Leaflet地图的光标,如下所示:
$('.leaflet-container').css('cursor','crosshair');
稍后,当您想要重置地图光标时,可以执行以下操作:
$('.leaflet-container').css('cursor','');
编辑于 2016年1月21日:针对每个要素的十字线
您还可以为支持className
选项的单个要素启用十字线,例如多边形或要素顶点等。
以下是一个可拖动顶点的示例,将切换指针十字线 (jsfiddle):
var svg_html_default = '<div style="margin:0px;padding:0px;height:8px;width:8px;border-style:solid;border-color:#FFFFFF;border-width:1px;background-color:#424242"</div>';
var default_icon = L.divIcon({
html: svg_html_default,
className: 'leaflet-mouse-marker',
iconAnchor: [5,5],
iconSize: [8,8]
});
var m = new L.marker([33.9731003, -80.9968865], {
icon: default_icon,
draggable: true,
opacity: 0.7
}).addTo( map );
m.on("mouseover",function(){$('.leaflet-mouse-marker').css('cursor','crosshair');});
m.on("mouseout",function(){$('.leaflet-mouse-marker').css('cursor','');});
Leaflet的样式允许您更改一些光标行为。将它们放在您的本地CSS中以进行更改。
/* Change cursor when mousing over clickable layer */
.leaflet-clickable {
cursor: crosshair !important;
}
/* Change cursor when over entire map */
.leaflet-container {
cursor: help !important;
}
设置为十字准线:
document.getElementById('map').style.cursor = 'crosshair'
重置回原始状态:
document.getElementById('map').style.cursor = ''
active
伪类。#map:active {
cursor: url('..custom.png');
}
如果要覆盖光标,您可能需要使用css3属性user-select: none
,这样在拖动元素时,它不会在文本和默认光标之间切换。该实现也在JSFiddle中显示。
// CSS first. Add this to leaflet stylesheet.
.leaflet-interactive.wait-cursor-enabled {
cursor: wait !important;
}
// JS select from map container and add class to each element
let map = L.map('map');
let els = map.getContainer().querySelectorAll('.leaflet-interactive');
for(let el of els){
el.classList += ' wait-cursor-enabled';
}
//JS remove class once no longer needed
let els = map.getContainer().querySelectorAll('.leaflet-interactive.wait-cursor-enabled');
for(let el of els){
el.classList.remove("wait-cursor-enabled");
}
我使用react-leaflet,需要根据应用程序中较高级别的状态更改地图和其上面的多边形的光标。更改地图本身的光标很简单:
map.getContainer().style.cursor = 'crosshair';
className
选项,可以用来覆盖默认的leaflet-interactive
类,该类将光标设置为pointer
。然而,我发现className
不是一个动态选项:重新渲染多边形不会改变className
(参见此 github 问题)。cursor
样式规则,但是这也只在首次创建多边形时起作用。最终,我决定捕获对多边形对象的引用:<Polygon ref={(el:any) => this.wrapperRef = el} /* ... */ />
并使用此方法在更新时设置光标样式规则:
componentDidUpdate = () => {
this.wrapperRef._path.style.cursor = this.props.cursor;
}
如在 上述 Github 问题 中所讨论的那样,由 Leaflet 创建的对象的属性 _path
可用于访问和重写样式。
$('.leaflet-container').css('cursor','crosshair');
#map[control=pressed],
#map[control=pressed] .leaflet-interactive {
cursor: url('..custom.png');
}
<svg> <g> <path class="leaflet-interactive">...