我有 10 到 15 个不同的层,例如汽车、公共汽车、路线等。如果需要,我会在地图上添加动态图层,因为所有图层都不存在在地图上。
所以我在单击图层时显示有关图层的信息,但我希望当我将鼠标悬停在图层上时,将鼠标指针光标样式更改为"十字准线"。
我已经在 mouseenter 事件上编写了更改光标样式,但它有时似乎有效,有时即使鼠标悬停在图层上,但光标样式不会改变。
第一种方式:
map.on('mouseenter', (e: any) => {
self.mapInstance.getCanvas().style.cursor = 'crosshair';
});
第二种方式:
map.on('mouseenter',(e: any) => {
var features = map.queryRenderedFeatures(e.point,{ layers: ['Car',"Bus"] });
//error let's say any layer still on exist on map
if(features.length)
map.getCanvas().style.cursor = 'crosshair';
});
我的问题:
光标样式未得到更改
查询时出错渲染图层等要素不存在
鼠标在悬停图层上闪烁
如何在鼠标悬停在不同层上更改光标的样式?
map.on('mouseenter', 'clusters', () => {
map.getCanvas().style.cursor = 'pointer'
})
map.on('mouseleave', 'clusters', () => {
map.getCanvas().style.cursor = ''
})
这是如何让它专门与 clusers 一起工作,但代码可能仍然有帮助。
祝你好运!
map.on("mouseenter", layer.id, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", shape.id, () => {
map.getCanvas().style.cursor = "default";
});
您可以向每个图层添加自定义事件,例如点击次数。鼠标事件也是如此。
鼠标移动怎么样?
一些填充,因为 SO 至少需要 30 个字符才能发布......