Как изменить курсор на зависание в 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' : '';
    });
}