更改指定图层的指针移动光标样式

Question

在将鼠标悬停在 geojson layer/s 上方时快速（我相信对你们中的一些人来说是一个简单的）关于光标样式的问题。

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

当我将鼠标悬停在行政区域上方时，我想要更改光标的样式，但似乎我遗漏了一些东西。

我正在尝试使用此代码块将仅管理边界层隔离到层：

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 稍微调整了代码，但它仍然不起作用。我检测到问题出在我用于蒙版剪辑的图层中，删除后，JGH 提供的代码可以正常工作。

这是我用于蒙版剪辑的代码

 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' : '';
});

希望对你有帮助:)

Answer 2

在你的函数中，你基本上是在鼠标位置循环遍历所有层。在该循环中，如果层具有正确的名称，则设置指针，否则，如果层具有不同的名称，则删除指针（或将其设置为其他名称）。

实际上，它取决于图层顺序：
例如：第 1 层 = 目标 -> 设置自定义指针。第 2 层 = 其他层 -> 删除指针。 ==> 最终指针：已移除

ex：第 1 层 = 其他层 -> 删除指针。第 2 层 = 目标 -> 设置自定义指针。 ==> 最终指针：自定义指针

循环发生在您设置hit 变量时，即它仅对应于最后一层，因为您覆盖了每一层的值。

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 = false;
  e.map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    if ( vectorJLS.get('layer_name') === 'jls') {
          //IF we have found the layer, flag it (but don't return anything!)
          hit = true;
     }
  });

  e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});