21

我设法向从远程 GeoJSON 资源添加的要素图层添加交互性。当我点击一个功能时，我会得到它的 ID，触发一个 AJAX 请求并在地图区域之外的页面上显示一些有关该功能的相关信息。

我使用了Select交互。

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

我在文档、本网站或谷歌搜索中找不到任何内容。

4

12 回答 12

25

它也可以在没有 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 = '';
    }
});
于 2014-12-09T21:17:07.323 回答
15

这是另一种方法：

map.on('pointermove', function(e){
  var pixel = map.getEventPixel(e.originalEvent);
  var hit = map.hasFeatureAtPixel(pixel);
  map.getViewport().style.cursor = hit ? 'pointer' : '';
});
于 2016-02-02T17:57:46.687 回答
13

如果这不起作用，请尝试 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", "");
    }
});
于 2014-12-15T23:15:07.720 回答
10

感谢 Azathoth 在评论中提供的示例链接，我找到了一个解决方案：

  • 使用 OL3pointermove事件
  • 使用 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

于 2014-09-26T13:54:08.663 回答
4

对我来说，它是这样工作的：

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';
          });
于 2017-01-26T11:04:09.447 回答
2

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

map.on("pointermove", function (evt) {
    var hit = map.hasFeatureAtPixel(evt.pixel);
    map.getTargetElement().style.cursor = (hit ? 'pointer' : '');
});
于 2016-03-21T13:59:44.457 回答
2

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

固定为：map.getTargetElement()s.style.cursor = hit ? 'pointer' : '';而不是map.getTarget().style.cursor = hit ? 'pointer' : '';

于 2016-04-12T21:07:33.977 回答
2

我用下面的代码做到了：

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', '');
    }
});
于 2015-10-01T08:57:10.327 回答
1

如果你们使用 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()
于 2016-05-27T15:13:05.947 回答
1

获取目标元素的简单方法 

var target = map.getTarget();

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

target.style.cursor = features.length > 0) ? 'pointer' : '';
于 2015-12-24T10:06:47.920 回答
0

简单的方法

map.on('pointermove', (e) => {
      const pixel = map.getEventPixel(e.originalEvent);
      const hit = map.hasFeatureAtPixel(pixel);
      document.getElementById('map').style.cursor = hit ? 'pointer' : '';
    });
}
于 2019-06-18T10:11:32.237 回答
0

我试图pointermove通过避免在不必要时更新样式来最小化事件关闭，因为它经常调用：

示例 1：使用jQuery：

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

示例 2：没有jQuery：

var cursorStyle = "";
map.on("pointermove", function (e) {
    let newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
    if (newStyle !== cursorStyle) {
        this.getTargetElement().style.cursor = cursorStyle = newStyle;
    }
});
于 2018-12-26T19:57:44.693 回答