Вимкнути панорамування / перетягування на листівці з картою для діва в межах карти

Хтось знає, як придушити панорамування, коли клацнути та перетягнути верхню частину віконця, вбудованого у саму карту?

Наприклад, тут , коли ви клацаєте та перетягуєте поверх легенди, карта тягнеться із собою. Я хочу придушити цю функцію. Мені відомо, чи ця методика, але я хочу знати, чи це єдиний спосіб:

map.dragging.disable();

leaflet

— Містер Конколато
джерело

Я реалізував подібну функціональність за допомогою слухача jQuery .hover (використовуючи handlerIn і handlerOut для відключення та включення перетягування). Не впевнений, чи це варіант для вас: api.jquery.com/hover

— evv_gis

Відповіді:

Використовуючи приклад з веб-сайту Leaflet, відзначте, де L.Controlоб'єкт інстанціюється як info; це <div>поле у верхньому правому куті, пов’язане із взаємодією на наближенні до карти. Ось де це визначено в index.htmlприкладі Leaflet:

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);

Щоб відключити перетягування, коли курсор користувача знаходиться в цьому <div>полі , додайте слухач подій до HTMLElement( <div>елемента), який містить L.Controlоб'єкт:

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });

Нагадаємо, це mapбуло визначено як L.Mapекземпляр раніше.

— Артур
джерело

Дякую @Arthur, я знайомий з цим підходом. Я сподівався, що хтось може запропонувати рішення, використовуючи css, як у покажчиках-подіях: auto чи pointer-події: жодне або щось подібне до тих, які не дуже працюють для мене. Якщо більше ніхто не опублікує кращого рішення, я передам вам перевірку, оскільки це означатиме, що це найкраще рішення.

— Містер Конколато

Я також хотів би це бачити. Було б добре, якби CSS міг вирішити цю проблему, але який елемент повинен керувати подіями вказівника? leaflet-controlЕлемент міститься в leaflet-containerелементі , а другий отримує покажчик події , які викликають збільшення і панорамування.

— Артур

Я намагався безрезультатно поставити це на цікавий поділ.

— Містер Конколато

Так, і це має сенс: <div>інтерес викликає дитина, leaflet-controlяка сама знаходиться всередині leaflet-container. Події отримує батько ( leaflet-container) перед дитиною ( leaflet-control).

— Артур

Альтернативним рішенням цього є припинення поширення подій за допомогою JavaScript (як це робиться для елементів керування Leaflet, наприклад, кнопки збільшення):

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}

— Ілля Звєрєв
джерело