Как изменить курсор на зависание в openlayers 3?

Мне удалось добавить интерактивность к функциональному уровню, добавленному из удаленного ресурса GeoJSON. Когда я нажимаю на функцию, я получаю ее идентификатор, запускаю запрос AJAX и отображаю соответствующую информацию об этой функции на странице за пределами области карты.

Я использовал взаимодействие Select.

Я хотел бы сделать еще более понятным для пользователя, что он может нажать на функции на карте. Есть ли способ изменить курсор мыши на "курсор" "руки", когда мышь наводит функцию, содержащуюся в ol.layer.Vector?

Я не мог найти ничего в документе, на этом сайте или в googling.

Ответ 1

Благодаря ссылке, представленной 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

Ответ 2

Это можно сделать и без 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 = '';
    }
});

Ответ 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", "");
    }
});

Ответ 4

Вот еще один способ сделать это:

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

Ответ 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';
          });

Ответ 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', '');
    }
});

Ответ 7

Простой способ получить целевой элемент

var target = map.getTarget();

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

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

Ответ 8

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

Исправлено: map.getTargetElement()s.style.cursor = hit ? 'pointer' : ''; вместо map.getTarget().style.cursor = hit ? 'pointer' : '';

Ответ 9

Если вы, ребята, используете 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()

Ответ 10

Другой способ (в сочетании с части вышеприведенных ответов, но еще проще):

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

Ответ 11

Я попытался минимизировать pointermove события 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;
    }
});

Ответ 12

Простой способ

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