OpenStreetMap标记cursor:pointer属性失效问题求助

方案1：修正图标样式的cursor配置位置 #

你之前把cursor: 'pointer'放在外层ol.style.Style里是错误的。在OpenLayers中，图标要素的鼠标指针样式需要配置在ol.style.Icon的参数中，而非外层Style对象。修改样式代码如下：

// Create a marker style 1  
var markerStyle1 = new ol.style.Style({
    image: new ol.style.Icon({
        src: '/assets/images/ico.png',
        scale: 1,
        cursor: 'pointer' // 将cursor移至Icon配置内
    })
});

方案2：通过地图pointermove事件动态设置鼠标样式 #

如果方案1不生效，可能是图层交互或事件优先级问题，可通过监听地图pointermove事件，手动检测并设置鼠标样式：

map.on('pointermove', function(e) {
    var hit = map.hasFeatureAtPixel(e.pixel);
    map.getViewport().style.cursor = hit ? 'pointer' : '';
});

若需仅针对特定标记（如命名为marker1、marker2的要素），可优化事件逻辑：

map.on('pointermove', function(e) {
    var features = map.getFeaturesAtPixel(e.pixel);
    if (features && features.some(f => f.get('name')?.startsWith('marker'))) {
        map.getViewport().style.cursor = 'pointer';
    } else {
        map.getViewport().style.cursor = '';
    }
});

方案3：修正CSS选择器优先级 #

你之前的CSS选择器可能未匹配OpenLayers实际DOM结构，尝试使用更高优先级的选择器：

/* 针对矢量图层的图标要素 */
.ol-layer-vector .ol-feature .ol-icon {
    cursor: pointer !important;
}

或直接针对所有图标强制覆盖样式：

.ol-icon {
    cursor: pointer !important;
}

内容的提问来源于stack exchange，提问作者Luca Frassineti