如何在openlayers 3中实现鼠标悬停时更改光标？

Question

我成功地给一个来自远程GeoJSON资源的要素图层添加了交互功能。当我点击一个要素时，我会获取它的ID，发起一个AJAX请求，并在地图区域之外的页面上显示一些相关信息。

我使用了一个名为Select的交互模块。

我想让用户更清楚地知道他可以通过单击地图上的要素来进行操作。是否有任何方法可以在鼠标悬停在ol.layer.Vector中包含的要素上时将鼠标光标更改为“手型”？

我在文档、这个网站或者谷歌搜索中都没有找到相关信息。

- Pierre Henry

---

有一个例子：http://openlayers.org/en/v3.0.0/examples/icon.html。老实说，我正在尝试在我的地图中使用相同的方法，但是没有成功：**未捕获的类型错误：无法设置未定义属性'cursor'**。 - Azathoth

谢谢提供链接。我稍后会尝试一下。 - Pierre Henry

@Azathoth getTarget 函数会返回一个用于映射目标的参数：字符串或 HTMLElement。如果你想改变其样式，应该使用 HTMLElement，就像示例中一样。 - tonio

@tonio 我认为我复制了示例中使用的所有代码，但是**console.log(map.getTarget());**打印出一个包含“map”的字符串。 - Azathoth

@Azathoth：请看我的回答，了解如何处理您获得的字符串值。 - Pierre Henry

map.getTargetElement().style.cursor = 'pointer'; 对我有效 - Pratik Goenka

Answer 1

同样可以不用 jQuery 完成：

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

- Pablo

---

在3.17.1版本中，这段代码可以正常运行。但是不能使用this.getTarget()，需要使用this.getTargetElement()。 - David

Answer 2

这里是另一种方法：

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

- Robert M

---

顺便提一下，为了方便复制粘贴，你应该在末尾添加缺失的括号“);”。 - fnicollet

Answer 3

如果那个方法不起作用，可以尝试两种方法结合，这似乎对我的向量弹出窗口有用...

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", "");
    }
});

- ohjeeez

---

这个对我有效，其他的不行。OL3 // 版本：v3.1.0-pre.2-179-gca3dfe2 - Timothy Dalton

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

- Pierre Henry

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

- winnewoerp

---

有趣的想法，但不要忘记提到图层没有本地“名称”属性，这必须在创建图层时设置。var myLayer = new ol.layer.Vector({ source: mySource, style: myStyle, name: "myLayerName" }); - Josef M. Schomburg

Answer 6

另一种方法（结合了以上答案的部分，但更简单）：

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

- JustAC0der

---

这是使用OpenLayers 5的正确方法。 - Luke The Obscure

Answer 7

我用以下代码实现了它：

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

- NoRyb

Answer 8

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

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

- cinthyasm

Answer 9

简单获取目标元素的方法。

var target = map.getTarget();

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

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

- Nurlan

---

下降的原因：使用map.getTargetElement()（https://openlayers.org/en/latest/apidoc/ol.Map.html#getTargetElement）。 - Corey Alix

Answer 10

如果您正在使用Angular 2，您必须使用以下代码：

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

如果map变量是一个成员类，你可以使用"this.map"来引用它，如果它在当前函数内声明，可以使用"map"来引用。但最重要的是，不要写出以下内容。

map.getTargetElement()

但是你写了。

this.getTargetElement()

- nix86