问题描述
我希望更改悬停时的光标样式,这将取决于同一图层上每个要素渲染的某些属性值。现在发生的情况是,同一样式中所有要素的光标样式都已更改层。我要控制它。
解决方法
是的,这是可行的。为此,您需要查询鼠标指针下的功能,然后确定将仅用于过滤某些功能以区分行为的属性是什么。
我为您起草了how to change color and pointer on mouse over上的一个小提琴,其中我为纽约市所有建筑物中的一个建筑物仅添加了一个特征ID的过滤器,该过滤器将变为红色,更改其状态(“悬停; true”)并将鼠标指针更改为map.getCanvasContainer().style.cursor = 'pointer'
。
这是相关代码:
let mapConfig = {
NYC: {
origin: [-74.044514,40.689259,39],center: [-74.0137,40.70346,0],zoom: 16.2,pitch: 60,bearing: 35
}
}
mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';
let point = mapConfig.NYC;
var map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/streets-v11',center: point.center,zoom: point.zoom,pitch: point.pitch,bearing: point.bearing,container: 'map',antialias: true,hash: true
});
map.on('style.load',function() {
if (map.getSource('composite')) {
map.addLayer({
'id': '3d-buildings','source': 'composite','source-layer': 'building','type': 'fill-extrusion','minzoom': 14,'paint': {
'fill-extrusion-color': [
'case',['boolean',['feature-state','hover'],false],'#ff0000','#ddd'
],'fill-extrusion-height': ["number",["get","height"],5],'fill-extrusion-base': ["number","min_height"],'fill-extrusion-opacity': 1
}
},'road-label');
}
let fHover;
map.on('click',function(e) {
var features = map.queryRenderedFeatures(e.point,{
layers: ['3d-buildings']
});
console.log(features[0].id);
})
map.on('mousemove',{
layers: ['3d-buildings']
});
//we will change pointer and color for 42455719
if (features[0] && features[0].id == 42455719) {
mouseover(features[0]);
} else {
mouseout();
}
});
map.on('mouseout',function(e) {
mouseout();
});
function mouseout() {
if (!fHover) return;
map.getCanvasContainer().style.cursor = 'default';
map.setFeatureState({
source: fHover.source,sourceLayer: fHover.sourceLayer,id: fHover.id
},{
hover: false
});
}
function mouseover(feature) {
fHover = feature;
map.getCanvasContainer().style.cursor = 'pointer';
map.setFeatureState({
source: fHover.source,{
hover: true
});
}
});
如果此答案解决了您的问题,请将其标记为已接受,这样还可以帮助其他用户了解它是正确的解决方案。