[英]How to change the cursor on hover in openlayers 3?
I managed to add interactivity to a feature layer added from a remote GeoJSON resource.我设法为从远程 GeoJSON 资源添加的要素图层添加了交互性。 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.
当我点击一个功能时,我会得到它的 ID,触发一个 AJAX 请求并在地图区域外的页面上显示一些关于该功能的相关信息。
I used a Select
interaction.我使用了
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
?当鼠标悬停在
ol.layer.Vector
包含的特征时,有什么方法可以将鼠标光标更改为“手”的“光标”?
I couldn't find anything in the doc, on this site or by googling.我在文档、本网站或谷歌搜索中找不到任何内容。
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 = '';
}
});
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' : '';
});
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", "");
}
});
Thanks to the example link provided by Azathoth in the comments I worked a solution out:感谢 Azathoth 在评论中提供的示例链接,我想出了一个解决方案:
pointermove
eventpointermove
事件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
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';
});
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', '');
}
});
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' : '');
});
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' : '';
Uncaught TypeError: Cannot set property 'cursor' of undefined.
Fixed with: map.getTargetElement()s.style.cursor = hit ? 'pointer' : '';
修正:
map.getTargetElement()s.style.cursor = hit ? 'pointer' : '';
map.getTargetElement()s.style.cursor = hit ? 'pointer' : '';
instead of map.getTarget().style.cursor = hit ? 'pointer' : '';
而不是
map.getTarget().style.cursor = hit ? 'pointer' : '';
map.getTarget().style.cursor = hit ? 'pointer' : '';
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".如果 map 变量是一个成员类,您将其称为“this.map”,而如果它在当前函数中声明,则可以将其称为“map”。 But above all, you don't write
但最重要的是,你不写
map.getTargetElement()
but you write但你写
this.getTargetElement()
I tried to minimize pointermove
event closure, by avoiding to update style when not necessary, because it calls so very often:我试图通过避免在不必要时更新样式来最小化
pointermove
事件关闭,因为它经常调用:
Example-1: uses jQuery :示例 1:使用jQuery :
var cursorStyle = "";
map.on("pointermove", function (e) {
let newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
newStyle !== cursorStyle && $(this.getTargetElement()).css("cursor", cursorStyle = newStyle);
});
Example-2: no jQuery:示例 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;
}
});
Easy way简单的方法
map.on('pointermove', (e) => {
const pixel = map.getEventPixel(e.originalEvent);
const hit = map.hasFeatureAtPixel(pixel);
document.getElementById('map').style.cursor = hit ? 'pointer' : '';
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.