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

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

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

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

例如：第 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' : '';
});

Answer 2

最后，在 JGH 同事的帮助下，我找到了适合我的问题的解决方案。在搜索发布页面和 google 机器时，我偶然发现了一些有关图层过滤器及其在方法 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' : '';
});

希望对您有所帮助:)

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

Changing cursor style on pointermove for specified layer

javascript

canvas

openlayers

openlayers-3