（Vaadin 地图）当用户将鼠标悬停在功能标记上时更改光标

Question

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

我知道 Vaadin 地图组件提供了带有事件侦听器的功能标记。我的问题是当用户将鼠标悬停在标记上时如何更改光标形状。我找不到解决办法。预先感谢！

Answer 1

尚无用于鼠标移动或悬停事件的 Java API。可以通过添加一些 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;
        }
    }
}

Answer 2

简单易行的方法，无需 JavaScript 和/或 CSS。

重要的部分是： component.getStyle().setCursor("pointer");

将鼠标悬停在“标题”组件上时，光标更改为“手”。

在 Vaadin 24.4 和 Opera 浏览器上测试。

    Image logo = new Image("Tangram_logo.svg","logo");
    VerticalLayout title = new VerticalLayout(logo, new H3("Customer Portal"));
    title.setWidthFull();
    title.setPadding(true);
    title.setAlignItems(FlexComponent.Alignment.CENTER);
    title.getStyle().setCursor("pointer");
    title.addClickListener(e -> getUI().ifPresent(ui -> ui.navigate(DashboardView.class)));