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

Question

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

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

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

Я не мог найти что-либо в документе, на этом сайте или по поисковому запросу.

Answer 1

Благодаря примерном ссылке, предоставленной Азатота в комментариях я работал решение из:

• используя 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 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 = ''; 
    } 
}); 

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

Я сделал это с помощью следующего кода:

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 5

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

var target = map.getTarget(); 

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

Answer 9

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

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

Если переменная карту класс члена Вы обращаетесь к нему как «this.map», а если она объявлена внутри текущей функции ее можно назвать «картой».Но прежде всего, вы не пишите

map.getTargetElement() 

но вы пишете

this.getTargetElement() 

Answer 10

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

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