Estou tentando mostrar diferentes camadas GeoJSON em diferentes camadas de zoom usando a API do Leaflet. Posso carregar e exibir todas as três camadas ao mesmo tempo (embora na verdade não queira que todas sejam exibidas de uma vez). Posso carregá-los e exibi-los em diferentes níveis de zoom.
Eu tenho o código configurado para que, nos níveis de zoom 1 a 6, o mapa mostre uma camada GeoJSON. Nos níveis 7-10, ele mostrará outro, e nos níveis 11+, mostrará um terceiro. Exibi-los funciona. O que estou tentando começar a trabalhar agora é desativar os outros se um for exibido. Passar de 1-6 a 7-10 funciona (o que significa que desativa a camada 1-6 corretamente), mas não de 7-10 a 11+ (o que significa que a camada 7-10 fica por aqui) e não consigo entender por que (ele usa o mesmo código).
Aqui está o ajax para as camadas GeoJSON:
function getJson(defaultStyle, map, simp, geojsonLayer){
var url = 'file' + simp + '.json';
map.removeLayer(geojsonLayer);
geojsonLayer.clearLayers();
$.getJSON(url, function(data){
geojsonLayer = L.geoJson(data, {
style: defaultStyle,
onEachFeature: onEachFeature
});
geojsonLayer.addTo(map);
});
}
E aqui está a principal função que chama o ajax, dependendo do zoom. simpCounter é definido como 0 inicialmente.
map.on('zoomend', function(e) {
if (map.getZoom() >= 7 && map.getZoom() <= 10) {
if (simpCounter == 0 || simpCounter == 2) {
getJson(defaultStyle, map, 60, geojsonLayer);
simpCounter = 1;
}
} else if (map.getZoom() >= 11) {
if (simpCounter == 0 || simpCounter == 1) {
getJson(defaultStyle, map, 35, geojsonLayer);
simpCounter = 2;
}
}
});
Então, novamente, a primeira transição desliga a camada antiga corretamente, mas a segunda transição não. Obrigado pela ajuda.
fonte
Respostas:
Tente isso:
E para a sua função de chamada:
Quando você está passando os argumentos
map
,geojsonLayer
edefaultStyle
na chamadagetJson(defaultStyle, map, 60, geojsonLayer);
que está a criar novas instâncias de objetos. Em seguida, você executa o trabalho nas instâncias que podem refletir na tela, mas quando volta ao 'loop principal', basicamente esquece tudo o que acabou de fazer e retorna ao estado anterior.Desde que suponho que você definiu
defaultStyle
,map
e ageojsonLayer
população inicial no escopo global, você apenas precisa chamá-los, não há necessidade de ignorá-los. Com os ajustes que fiz, mudou o global, demap
modo que as alterações persistem após o término das chamadas de função.Esta solução funcionou para mim. Você pode ver todo o conteúdo do arquivo que criei aqui: http://pastebin.com/yMYQJ2jK
Também defino um nível de zoom final para 1-7, para que você possa ver os dados JSON iniciais quando retornar ao nível de zoom inicial; caso contrário, eles serão perdidos e nunca serão chamados de volta, a menos que você recarregue a página!
fonte
return
declaração. O uso de globals em javascript parece comum, portanto, dessa maneira, será mais fácil concluir sua tarefa.O folheto possui um tipo de estrutura de dados de coleta de grupos de camadas e também uma interface de controle de camadas que você pode ativar e desativar depois de codificá-lo como ouvintes de eventos na caixa de seleção.
fonte
Eu escrevi o exemplo abaixo para mostrar como remover múltiplos geoJSON layer.
fonte