Question

我设法为从远程GeoJSON资源添加的要素图层添加了交互性。当我点击某个功能时，我会获取其ID，在地图区域外的页面上发出一个AJAX请求并显示有关该功能的相关信息。

我使用Select互动。

我想让用户更清楚地知道他可以点击地图上的功能。当鼠标悬停在ol.layer.Vector中包含的功能时，有什么办法可以将鼠标光标改为“手”的“光标”吗？

我在文档中，网站上或通过Google搜索找不到任何内容。

Answer 1

如果这不起作用，尝试2的组合，似乎适用于我的矢量弹出...

var target = map.getTarget();
var jTarget = typeof target === "string" ? $("#" + target) : $(target);
// change mouse cursor when over marker
$(map.getViewport()).on('mousemove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
        return true;
    });
    if (hit) {
        jTarget.css("cursor", "pointer");
    } else {
        jTarget.css("cursor", "");
    }
});

Answer 2

没有jQuery也可以这样做：

map.on("pointermove", function (evt) {
    var hit = this.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        return true;
    }); 
    if (hit) {
        this.getTarget().style.cursor = 'pointer';
    } else {
        this.getTarget().style.cursor = '';
    }
});

Answer 3

这是另一种方法：

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

Answer 4

感谢Azathoth在评论中提供的示例链接我解决了问题：

使用OL3 pointermove事件
使用jQuery获取目标元素并更改其光标样式

以下是代码：

var cursorHoverStyle = "pointer";
var target = map.getTarget();

//target returned might be the DOM element or the ID of this element dependeing on how the map was initialized
//either way get a jQuery object for it
var jTarget = typeof target === "string" ? $("#"+target) : $(target);

map.on("pointermove", function (event) {
    var mouseCoordInMapPixels = [event.originalEvent.offsetX, event.originalEvent.offsetY];

    //detect feature at mouse coords
    var hit = map.forEachFeatureAtPixel(mouseCoordInMapPixels, function (feature, layer) {
        return true;
    });

    if (hit) {
        jTarget.css("cursor", cursorHoverStyle);
    } else {
        jTarget.css("cursor", "");
    }
});

以下是OpenLayers网站上示例的链接：http://openlayers.org/en/v3.0.0/examples/icon.html

Answer 5

对我而言，它的工作原理如下：

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 true;
          });
          e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });

我还添加了一个图层过滤器：

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 layer.get('name') === 'myLayer';
      });
      e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

我不得不选择一个新的解决方案作为我用于图层过滤器的旧解决方案，然后再不起作用了：

var hit = e.map.hasFeatureAtPixel(e.pixel, function(layer){
             return layer.get('name') === 'myLayer';
          });

Answer 6

我使用以下代码完成了它：

var target = $(map.getTargetElement()); //getTargetElement is experimental as of 01.10.2015
map.on('pointermove', function (evt) {
    if (map.hasFeatureAtPixel(evt.pixel)) { //hasFeatureAtPixel is experimental as of 01.10.2015
        target.css('cursor', 'pointer');
    } else {
        target.css('cursor', '');
    }
});

Answer 7

获取目标元素的简单方法

var target = map.getTarget();

target = typeof target === "string" ?
    document.getElementById(target) : target;

target.style.cursor = features.length > 0) ? 'pointer' : '';

Answer 8

Uncaught TypeError: Cannot set property 'cursor' of undefined.

已修复：map.getTargetElement()s.style.cursor = hit ? 'pointer' : '';而不是map.getTarget().style.cursor = hit ? 'pointer' : '';

Answer 9

如果你们使用Angular 2，你必须使用以下代码：

this.map.on("pointermove", function (evt) {
    var hit = evt.map.hasFeatureAtPixel(evt.pixel);
    this.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

如果map变量是一个成员类，你将其称为＆＃34; this.map＆＃34;，相反，如果它在当前函数中被声明，则可以将其称为＆＃34; map＆＃34; 。但最重要的是，你不会写

map.getTargetElement()

但你写了

this.getTargetElement()

Answer 10

另一种方式（结合上述部分答案，但更简单）：

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

Answer 11

我尝试尽量减少glot = sample_lot_number.groupby("Validity") vlot = sample1_lot_number.groupby("Validity") dplot = Data_Package_Lot_Number.dplot.groupby("Validity") ind = np.arange(4) width = 0.15 ax = plt.subplot() p1 = ax.bar(ind+width,glot.Lifecycle.count(), width) p2 = ax.bar(ind,vlot.Lifecycle.count(), width) p3 = ax.bar(ind-width,dplot.Lifecycle.count(), width) ax.set_xticks(ind + width / 2) ax.set_xticklabels(("Empty","InValid","Multiple Entries","Valid"))事件的关闭，避免了不必要的更新，因为它经常调用：

示例1：使用 jQuery ：

pointermove

示例2：否 jQuery：

var cursorStyle = "";
map.on("pointermove", function (e) {
    let newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
    newStyle !== cursorStyle && $(this.getTargetElement()).css("cursor", cursorStyle = newStyle);
});

Answer 12

简便方法

map.on('pointermove', (e) => {
      const pixel = map.getEventPixel(e.originalEvent);
      const hit = map.hasFeatureAtPixel(pixel);
      document.getElementById('map').style.cursor = hit ? 'pointer' : '';
    });
}

如何在openlayers 3中悬停光标？

12 个答案: