Desativar panorâmica / arrastar no mapa do folheto para div dentro do mapa

25

Alguém sabe como suprimir o panning quando você clica e arrasta por cima de uma caixa div incorporada no próprio mapa?

Por exemplo , aqui , quando você clica e arrasta sobre a parte superior da legenda, o mapa arrasta consigo. Eu quero suprimir essa função. Estou ciente se esta técnica, mas quero saber se esta é a única maneira:

map.dragging.disable();
leaflet Mr. Concolato
fonte
Eu implementei uma funcionalidade semelhante usando um ouvinte do jQuery .hover (usando handlerIn e handlerOut para desativar e ativar o arrasto). Não tenho certeza se essa é uma opção para você: api.jquery.com/hover
evv_gis

Respostas:

20

Usando o exemplo do site do Leaflet, observe onde o L.Controlobjeto é instanciado como info; esta é a <div>caixa no canto superior direito associada à interação instantânea do mapa. Aqui é onde é definido no index.htmlexemplo do folheto:

    // 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);

Para desativar o arrasto quando o cursor de um usuário estiver dentro desta <div>caixa , adicione um ouvinte de evento ao HTMLElement(um <div>elemento) que contém o L.Controlobjeto:

    // 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();
    });

Lembre-se de que mapfoi definido como a L.Mapinstância anterior.

Arthur
fonte
Obrigado @Arthur, estou familiarizado com essa abordagem. Eu esperava que alguém pudesse oferecer uma solução usando css como em eventos-ponteiro: eventos automáticos ou ponteiros: nenhum ou algo parecido com aqueles, que não funcionam muito bem para mim. Se ninguém mais postar uma solução melhor, eu darei a você a verificação, pois isso significa que essa é a melhor solução.
Mr. Concolato
Eu gostaria de ver isso também. Seria bom se o CSS pudesse resolver esse problema, mas qual elemento deve ter seus eventos de ponteiro gerenciados? O leaflet-controlelemento está contido no leaflet-containerelemento e o último está recebendo os eventos do ponteiro que acionam o zoom e o panorama.
9133 Arthur
Eu tenho tentado colocá-lo na div de interesse sem sucesso.
Mr. Concolato
Sim, e isso faz sentido: o <div>interesse é um filho do leaflet-controlqual ele próprio está dentro leaflet-container. Os eventos são recebidos pelo pai ( leaflet-container) antes do filho ( leaflet-control).
9133 Arthur
19

Uma solução alternativa para isso é interromper a propagação de eventos com JavaScript (como é feito para controles Leaflet, por exemplo, botões de zoom):

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);
}
Ilja Zverev
fonte