javascript - 在指定图层的 pointermove 上更改光标样式

Question

关于悬停在 geojson 层之上的光标样式的快速(我相信对你们中的一些人来说是一个简单的)问题。

因此，我有一个剪辑图层用于在 wms 图层周围创建 mask ，另一个剪辑图层代表一些行政区域。如下图所示

当我悬停在管理区域上方时，我想要改变光标的样式，但似乎我遗漏了什么。

我正在尝试使用此代码块将层隔离到仅行政边界层:

map.on('pointermove', function(e) {
if (e.dragging) return;
var pixel = e.map.getEventPixel(e.originalEvent);
var hit = e.map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    return vectorJLS.get('layer_name') === 'jls';
});
   e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

更新

虽然 JGH 稍微调整了代码，但仍然无法正常工作。我检测到问题出在我用于 mask 剪裁的图层中，当移除时，JGH 提供的代码可以正常工作。

这是我用于 mask 裁剪的代码

 var clipLayer = new ol.layer.Image({
     source: new ol.source.ImageVector({
         source: new ol.source.Vector({
             url: 'geojson/clip_wgs.geojson',
             format: new ol.format.GeoJSON()
         }),
         style: new ol.style.Style({
             fill: new ol.style.Fill({
                 color: 'black'
             })
         })
     })
 });


clipLayer.on('postcompose', function(e) {
    e.context.globalCompositeOperation = 'source-over';
});
clipLayer.on('precompose', function(e) {
    e.context.globalCompositeOperation = 'destination-in';
});
clipLayer.setMap(map);

是否可以在更改光标样式时以某种方式忽略剪辑层，或者我应该采用其他方法吗？

更新 - 2

我稍微调整了代码，但在 clipedLayer 打开时仍然没有任何成功。

map.on('pointermove', function(e) {
    if (e.dragging) return;

    var pixel = e.map.getEventPixel(e.originalEvent);
    // initialize the hit variable to false (not found)

    var hit = map.hasFeatureAtPixel(e.pixel, {
        layerFilter: function(layer) {
            return vectorJLS.get('layer_name') === 'jls';
        }
    });

    console.log(hit)
});

有趣的问题，如果我可以添加

Answer 1

最后，在 JGH 同事的帮助下，我找到了适合我的问题的解决方案。通过搜索发布页面和谷歌机器，我偶然发现了一些有关图层过滤器及其在方法 hasFeatureAtPixel 中的用法的有趣信息。此代码块对 3.20.1 以下的版本有效，但有关 OpenLayers Git 的更多信息

map.on('pointermove', function(e) {
    if (e.dragging) return;
    var pixel = e.map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(e.pixel, {
        layerFilter: function(layer) {
            return layer.get('layer_name') === 'jls';
        }
    });
     e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

对于较新的版本，您应该像这样使用图层过滤器(我使用的是 4.6.5)

map.hasFeatureAtPixel(pixel, {
  layerFilter: layerFilterFn.bind(layerFilterThis)
});

或者像我这样的特殊问题

map.on('pointermove', function(e) {
    if (e.dragging) return;
    var pixel = e.map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(e.pixel, {
        layerFilter: function(layer) {
            return layer.get('layer_name') === 'jls';
        }
    });
     e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

希望对您有所帮助:)