(Vaadin Map)当用户悬停在特征标记上时更改光标

Question

我目前正在使用Vaadin Map组件来可视化船只在海上的轨迹。我想强调轨迹中的一些协调点，以便他/她能够检查有关该点的更多信息。

我知道VaadinMap组件提供了一个带有事件监听器的功能标记。我的问题是，当用户将鼠标悬停在标记上时，如何更改光标形状。我找不到解决办法。提前谢谢！

Answer 1

目前还没有用于鼠标移动或悬停事件的Java API。可以通过添加一些JavaScript来实现这一点，这些JavaScript监听地图上的鼠标移动事件，然后在光标悬停在某个功能上或离开某个功能时发送自定义悬停事件。

下面是一个自定义Map类的快速原型，它实现了一个功能悬停事件，并在悬停在某个功能上时切换光标：

public class MapWithHoverEvent extends Map {
public MapWithHoverEvent() {
ComponentUtil.addListener(this, MapHoverEvent.class, e -> {
if (e.getFeatureId() != null) {
// Set cursor to pointer when mouse hovers over a feature
getElement().getStyle().set("cursor", "pointer");
} else {
// Reset cursor when mouse leaves a feature
getElement().getStyle().set("cursor", "initial");
}
});
}
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
// Setup mouse move listener on client-side, and send custom `map-hover` event
// when the mouse cursor enters or leaves a feature. On enter the event will have
// a feature id, on leave the feature id will be null
getElement().executeJs(
"const olMap = this.configuration;" +
"olMap.on('pointermove', e => {" +
"   const featuresAtPixel = olMap.getFeaturesAtPixel(e.pixel);" +
"   const feature = featuresAtPixel[0];" +
"   if (this.__lastHoveredFeature == feature) {" +
"       return;" +
"   }" +
"   this.__lastHoveredFeature = feature;" +
"   const hoverEvent = new CustomEvent('map-hover', {" +
"       detail: { featureId: feature ? feature.id : null }" +
"   });" +
"   this.dispatchEvent(hoverEvent);" +
"});");
}
@DomEvent("map-hover")
public static class MapHoverEvent extends ComponentEvent<Map> {
private final String featureId;
public MapHoverEvent(Map source,
boolean fromClient,
@EventData("event.detail.featureId") String featureId) {
super(source, fromClient);
this.featureId = featureId;
}
public String getFeatureId() {
return featureId;
}
}
}