Javascript 如何在 openlayers 3 中更改悬停光标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26022029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the cursor on hover in openlayers 3?
提问by Pierre Henry
I managed to add interactivity to a feature layer added from a remote GeoJSON resource. When I click on a feature I get its ID, fire an AJAX request and display some relevant info about the feature, on the page outside of the map area.
我设法为从远程 GeoJSON 资源添加的要素图层添加了交互性。当我点击一个功能时，我会得到它的 ID，触发一个 AJAX 请求并在地图区域外的页面上显示一些关于该功能的相关信息。
I used a Selectinteraction.
我使用了一个Select交互。
I would like to make it even clearer to the user that he can click on the features on the map. Is there any way I can change the mouse cursor to "cursor" of "hand" when the mouse hovers a feature contained in a ol.layer.Vector?
我想让用户更清楚地知道他可以点击地图上的要素。当鼠标悬停在 a 中包含的功能时，有什么方法可以将鼠标光标更改为“手”的“光标” ol.layer.Vector？
I couldn't find anything in the doc, on this site or by googling.
我在文档、本网站或谷歌搜索中找不到任何内容。
采纳答案by Pierre Henry
Thanks to the example link provided by Azathoth in the comments I worked a solution out:
感谢 Azathoth 在评论中提供的示例链接，我想出了一个解决方案：
- using OL3
pointermoveevent - using jQuery to get the target element and change its cursor style
- 使用 OL3
pointermove事件 - 使用 jQuery 获取目标元素并更改其光标样式
Here is the code :
这是代码：
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", "");
}
});
Here is the link to the example on OpenLayers site : http://openlayers.org/en/v3.0.0/examples/icon.html
这是 OpenLayers 站点上示例的链接：http: //openlayers.org/en/v3.0.0/examples/icon.html
回答by Pablo
It can be done as well without jQuery:
它也可以在没有 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 = '';
}
});
回答by ohjeeez
If that doesn't work, try a combination of the 2, seemed to work for my vector popup...
如果这不起作用，请尝试组合 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", "");
}
});
回答by Robert M
Here is another way to do it:
这是另一种方法：
map.on('pointermove', function(e){
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getViewport().style.cursor = hit ? 'pointer' : '';
});
回答by joschi81
For me it worked like this:
对我来说，它是这样工作的：
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' : '';
});
I also added a layer filter:
我还添加了一个图层过滤器：
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' : '';
});
I had to select a new solution as the old one I had use for the layer filter before did not work anymore:
我不得不选择一个新的解决方案，因为我之前用于图层过滤器的旧解决方案不再起作用：
var hit = e.map.hasFeatureAtPixel(e.pixel, function(layer){
return layer.get('name') === 'myLayer';
});
回答by NoRyb
I did it with the following code:
我用以下代码做到了：
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', '');
}
});
回答by Nurlan
Simple way to get target element
获取目标元素的简单方法
var target = map.getTarget();
target = typeof target === "string" ?
document.getElementById(target) : target;
target.style.cursor = features.length > 0) ? 'pointer' : '';
回答by JustAC0der
Another way (combined from parts of above answers, but even simpler):
另一种方式（结合上述部分答案，但更简单）：
map.on("pointermove", function (evt) {
var hit = map.hasFeatureAtPixel(evt.pixel);
map.getTargetElement().style.cursor = (hit ? 'pointer' : '');
});
回答by cinthyasm
Uncaught TypeError: Cannot set property 'cursor' of undefined.
Uncaught TypeError: Cannot set property 'cursor' of undefined.
Fixed with: map.getTargetElement()s.style.cursor = hit ? 'pointer' : '';instead of map.getTarget().style.cursor = hit ? 'pointer' : '';
固定为：map.getTargetElement()s.style.cursor = hit ? 'pointer' : '';而不是map.getTarget().style.cursor = hit ? 'pointer' : '';
回答by nix86
If you guys are using Angular 2 you must use the following code:
如果你们使用的是 Angular 2，则必须使用以下代码：
this.map.on("pointermove", function (evt) {
var hit = evt.map.hasFeatureAtPixel(evt.pixel);
this.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
If the map variable is a member class you refer to it as "this.map", instead if it is declared inside the current function it can be refered to as "map". But above all, you don't write
如果 map 变量是一个成员类，您将其称为“this.map”，而如果它在当前函数中声明，则可以将其称为“map”。但最重要的是，你不写
map.getTargetElement()
but you write
但你写
this.getTargetElement()
