如何在 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.getTargetElement().style.cursor = 'pointer';
    } else {
        this.getTargetElement().style.cursor = '';
    }
});

Answer 2

這是另一種方法：

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

Answer 3

如果這不起作用，請嘗試組合 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 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

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

Answer 6

我用以下代碼做到了：

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

Answer 7

另一種方式（結合上述部分答案，但更簡單）：

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

Answer 8

獲取目標元素的簡單方法

var target = map.getTarget();

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

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

Answer 9

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

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

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()

Answer 11

我試圖通過避免在不必要時更新樣式來最小化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;
    }
});

Answer 12

簡單的方法

map.on('pointermove', (e) => {
      const pixel = map.getEventPixel(e.originalEvent);
      const hit = map.hasFeatureAtPixel(pixel);
      document.getElementById('map').style.cursor = hit ? 'pointer' : '';
    });
}