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

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

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

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

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

13
javascript openlayers-3

10 ответов

Если это не работает, попробуйте комбинацию 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", "");
    }
});
12

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

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

9

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

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

Я сделал это со следующим кодом:

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

для меня это работало так:

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

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

var target = map.getTarget();

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

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

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

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

1

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

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

Если вы, ребята, используете Angular 2, вы должны использовать следующий код:

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

если переменная map является классом-членом, вы называете ее " this.карте", а если он объявлен внутри текущей функции, его можно назвать "картой". Но главное, ты не пишешь!--4--> 

map.getTargetElement()

но вы пишите

this.getTargetElement()
0