Question

快速（我相信你们中的一些人很容易）关于光标样式的问题，同时将鼠标悬停在geojson图层上面。

所以，我有一个剪辑图层，我用来在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层=目标 - ＆gt;设置自定义指针。第2层=其他层 - ＆gt;删除指针。 ==＆GT;最终指针：已删除

例如：第1层=其他层 - ＆gt;删除指针。第2层=目标 - ＆gt;设置自定义指针。 ==＆GT;最终指针：自定义指针

当您设置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的帮助下，我找到了解决问题的合适方案。搜索发布页面和谷歌机器我偶然发现了一些关于图层过滤器的有趣信息及其在方法 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' : '';
});

希望有所帮助：）

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

2 个答案: