Как изменить курсор по умолчанию на картах буклетов?

Я пытаюсь изменить значок курсора по умолчанию при нажатии определенной кнопки управления. Хотя я был частично успешным, используя css в контейнере div, это делает переопределение состояния перемещения курсора, чего я не хочу. Я имею в виду, что значок перемещения больше не отображается при перемещении по карте (но не на маркеры!).

Я хотел бы знать, есть ли неакустический путь через api для достижения специального поведения курсора, не переделывая все.

Это то, что я пытался сделать, #map - это контейнер div для карты листовки.

#map[control=pressed] {
    cursor: url('..custom.png');
}

Ответы

Ответ 1

Изменить 5.18.2017: Необработанные CSS и Javascript через Листовку (рекомендуется)

Я просмотрел исходный код плагина BoxZoom и заметил их подход, используя Листовки встроенных DOM-мутаторов и хотели продвигать его здесь... это, безусловно, лучшая практика.

Пример jsfiddle

Где-то в вашем CSS есть класс вроде этого..

.leaflet-container.crosshair-cursor-enabled {
    cursor:crosshair;
}

Если вы хотите включить перекрестье, сделайте это в своем JS..

// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');

Затем, когда вы хотите отключить перекрестье, сделайте это в своем JS..

L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');

Оригинальный ответ: Перекрестье на уровне карты

@scud42 вернул меня на правильный путь. Вы можете использовать JQuery для изменения курсора карты Leaflet следующим образом:

$('.leaflet-container').css('cursor','crosshair');

Затем, когда вы хотите reset курсора карты, вы можете сделать это:

$('.leaflet-container').css('cursor','');

Редактировать 1.21.2016: Перекрестное пересечение

Вы также можете включить перекрестье для отдельных функций, поддерживающих параметр className, например, многоугольник или вершин объектов и т.д.

Вот пример перетаскиваемой вершины, которая будет переключать перекрестье указателя (jsfiddle):

var svg_html_default = '<div style="margin:0px;padding:0px;height:8px;width:8px;border-style:solid;border-color:#FFFFFF;border-width:1px;background-color:#424242"</div>';

var default_icon = L.divIcon({
  html: svg_html_default,
  className: 'leaflet-mouse-marker',
  iconAnchor: [5,5],
  iconSize: [8,8]
});

var m = new L.marker([33.9731003, -80.9968865], {
  icon: default_icon,
  draggable: true,
  opacity: 0.7
}).addTo( map );

m.on("mouseover",function(){$('.leaflet-mouse-marker').css('cursor','crosshair');});

m.on("mouseout",function(){$('.leaflet-mouse-marker').css('cursor','');});

Ответ 2

Листовые стили позволяют изменять поведение курсора. Поместите их в свой локальный CSS, чтобы внести изменения.

/* Change cursor when mousing over clickable layer */
.leaflet-clickable {
  cursor: crosshair !important;
}
/* Change cursor when over entire map */
.leaflet-container {
  cursor: help !important;
}

Ответ 3

Установите для перекрестия:

document.getElementById('map').style.cursor = 'crosshair'

Reset обратно:

document.getElementById('map').style.cursor = ''

Ответ 4

Используйте псевдо-класс active.

#map:active {
    cursor: url('..custom.png');
}

JSFiddle

Для переопределения курсора вы, вероятно, захотите использовать атрибут css3 user-select: none, чтобы он не переключался между текстом и курсором по умолчанию при перетаскивании элемента. Эта реализация также показана в JSFiddle.

Ответ 5

Вот что сработало для меня:

// CSS first. Add this to leaflet stylesheet.
.leaflet-interactive.wait-cursor-enabled {
    cursor: wait !important;
}

// JS select from map container and add class to each element
let map = L.map('map');
let els = map.getContainer().querySelectorAll('.leaflet-interactive');
for(let el of els){
   el.classList += ' wait-cursor-enabled'; 
}

//JS remove class once no longer needed
let els = map.getContainer().querySelectorAll('.leaflet-interactive.wait-cursor-enabled');
for(let el of els){
   el.classList.remove("wait-cursor-enabled");
}

Ответ 6

$('.leaflet-container').css('cursor','crosshair');