如何在openlayers 3中悬停光标？

Question

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

我用过Select互动.

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

我在文档中,在本网站上或通过谷歌搜索找不到任何内容.

Answer 1

它也可以在没有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 2

如果这不起作用,尝试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 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