Leaflet: GeoJson pointerEvents = 'none' quaisquer efeitos

Criado em 3 fev. 2017  ·  4Comentários  ·  Fonte: Leaflet/Leaflet

  • [X] Estou relatando um bug, não pedindo ajuda
  • [X] Examinei a documentação para ter certeza de que o comportamento está documentado e esperado
  • [X] Tenho certeza de que este é um problema de código do Leaflet, não um problema com meu próprio código nem com o framework que estou usando (Cordova, Ionic, Angular, React…)
  • [X] Pesquisei os problemas para ter certeza de que ainda não foram relatados

Como reproduzir

  • Versão do folheto que estou usando: 1.0.3
  • Navegador (com versão) que estou usando: Chrome 55
  • SO/Plataforma (com versão) que estou usando: Windows

Que comportamento estou esperando e qual comportamento estou vendo

Eu tenho que exibir duas sobreposições do GeoJson: uma que pode interagir com o usuário (clique, passe o mouse) e a segunda sem interação, apenas para exibir informações visuais.
A primeira camada está sob a segunda e apenas o traço deve ser desenhado.

Eu especifiquei "pointerEvents" para none para o estilo da segunda camada, mas LeafLet não usa essa propriedade: o svg gerado não tem essa propriedade.

Exemplo mínimo reproduzindo o problema

  • [X] este exemplo é o mais simples possível
  • [ ] este exemplo não depende de nenhum código de terceiros
var interactiveLayer = L.topoJson(epci2014TopoJson, {
        style: function (feature) {
            return {
                weight: 0.0,
                fillOpacity: 0.7,
                color: 'rgb(200,200,200)',
                fillColor: getColor(feature.properties.siren_epci || feature.properties.SIREN_EPCI)
            }
        },
        onEachFeature: function (feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: zoomToFeature
            });

        }
    }).addTo(map);

    var justForDrawLayer=L.geoJson(departementsGeoJson, {
        style: function (feature) {
            return {
                pointerEvents : 'none',
                clickable:false,
                weight: 3,
                fillOpacity: 0.0,
                color: 'rgb(220,220,220)'
            }
        }
    }).addTo(map);

Eu tentei colocar "clicável" para "falso", nenhuma alteração.

Desculpe-me se meu inglês não é suficiente certo. Obrigada.

Usando http://playground-leaflet.rhcloud.com/ ou qualquer outro site semelhante ao jsfiddle.

Comentários muito úteis

Eu tentei com " interactive:false ", funciona.
Sinto muito (por ter solicitado a comunidade) e feliz (porque funciona).

THX.

Todos 4 comentários

Eu especifiquei "pointerEvents" para none para o estilo da segunda camada, mas LeafLet não usa essa propriedade

Bem, pointerEvents não é uma opção reconhecida para L.Path , então não tenho certeza do que você esperava.

Eu tentei colocar "clicável" para "falso", nenhuma alteração.

Essa opção mudou de nome para interactive na versão 1.0.0, consulte "Opções herdadas da camada interativa" na documentação.

Obrigado pela sua resposta.

Para os "pointerEvents": como eu não estava habilitado para tornar a camada "inativa" para interações do usuário, tentei seguir o exemplo dado aqui: http://leafletjs.com/examples/map-panes/ para o painel e os pointerEvents aplicados à camada geoJson. Talvez eu tenha entendido mal essa noção.

Vou tentar com a propriedade inactive para o estilo geojson.

Meu objetivo é mostrar alguns países pequenos (polígonos) como um mapa cloropleto. Sob esta camada a camada de mosaico, e no topo outra camada de geojson exibindo países maiores, cada um é um "contêiner" para países pequenos. Eu quero que esta sobreposição exiba apenas o traçado do polígono com total transparência para o interior. Eu quero que a sobreposição "países pequenos" interaja com o usuário e a camada "países maiores" não.

THX

Eu tentei com " interactive:false ", funciona.
Sinto muito (por ter solicitado a comunidade) e feliz (porque funciona).

THX.

Eu tenho a mesma tarefa de renderizar duas camadas e a camada superior deve estar inativa. "in interativo:falso " ajudou, obrigado!

Esta página foi útil?
0 / 5 - 0 avaliações