【Vaadin Map】鼠标悬停要素标记时更改光标形状

方法一：通过OpenLayers Select交互+样式配置 #

这是最简洁的实现方式，利用OpenLayers内置交互处理悬停，并直接在样式中指定光标：

// 1. 创建基础标记样式
Style baseMarkerStyle = new Style();
baseMarkerStyle.setImage(new Icon(
    new IconOptions().setSrc("your-marker-icon.png")
));

// 2. 创建悬停样式，指定光标
Style hoverStyle = new Style();
hoverStyle.setCursor("pointer"); // 悬停时显示手型光标
// 可选：同时修改标记图标，增强视觉反馈
hoverStyle.setImage(new Icon(
    new IconOptions().setSrc("your-hover-marker-icon.png")
));

// 3. 创建Select交互并启用悬停模式
Select hoverSelect = new Select();
hoverSelect.setHover(true); // 开启悬停检测
hoverSelect.setStyle(hoverStyle); // 悬停时应用该样式

// 4. 将交互添加到Vaadin Map
Map shipMap = new Map();
shipMap.getOpenMap().addInteraction(hoverSelect);

// 5. 添加标记要素到地图
Feature shipPoint = new Feature(new Point(new LonLat(longitude, latitude).transform(
    Projection.get("EPSG:4326"), Projection.get("EPSG:3857")
)));
shipPoint.setStyle(baseMarkerStyle);
VectorSource source = new VectorSource();
source.addFeature(shipPoint);
shipMap.addLayer(new VectorLayer(source));

方法二：通过鼠标事件监听手动切换光标 #

如果需要更精细的控制（比如只针对特定标记），可以监听地图的指针移动事件，手动判断并修改光标：

Map shipMap = new Map();
VectorLayer markerLayer = new VectorLayer(new VectorSource());

// 添加标记要素
Feature targetMarker = new Feature(new Point(/* 你的坐标 */));
targetMarker.setStyle(new Style().setImage(new Icon(new IconOptions().setSrc("marker.png"))));
markerLayer.getSource().addFeature(targetMarker);
shipMap.addLayer(markerLayer);

// 监听指针移动事件
shipMap.getElement().addEventListener("pointermove", e -> {
    JsonObject eventData = e.getEventData();
    // 获取当前鼠标位置对应的地图坐标
    LonLat mapCoord = new LonLat(
        eventData.getNumber("clientX"), eventData.getNumber("clientY")
    ).transform(Projection.get("EPSG:4326"), shipMap.getOpenMap().getView().getProjection());
    
    // 检测是否悬停在目标标记上
    boolean isHovering = shipMap.getOpenMap().forEachFeatureAtPixel(
        shipMap.getOpenMap().getPixelFromCoordinate(mapCoord),
        (feature, layer) -> feature == targetMarker
    ) != null;
    
    // 根据检测结果切换光标
    shipMap.getElement().getStyle().set("cursor", isHovering ? "pointer" : "default");
});

注意事项 #

• Vaadin Map底层基于OpenLayers，所有OpenLayers的样式、交互API都可直接使用
• 确保坐标投影转换正确（通常从WGS84(EPSG:4326)转换到Web墨卡托(EPSG:3857)）
• 若要批量处理多个标记，可给标记添加自定义属性（如marker.set("isShipPoint", true)），在检测时通过属性过滤

内容的提问来源于stack exchange，提问作者Jihwan Lee