Camadas e interatividade com o Leaflet
Loading…
Reload document 
Open in new tab Slide 1: Introdução às camadas
Explicação:
As camadas no Leaflet são objetos geográficos adicionados a um mapa. Há dois tipos principais:
- Camadas de ladrilhos: são usadas como plano de fundo para o mapa (por exemplo, OpenStreetMap).
- Camadas de vetor: são usadas para adicionar elementos geográficos, como pontos, linhas ou polígonos.
Slide 2: Adicionando uma camada de ladrilho
Explicação:
As camadas de ladrilho exibem a imagem de fundo do mapa. O exemplo mostra como adicionar uma camada do OpenStreetMap usando o método L.tileLayer().
Código do exemplo:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);Os blocos permitem que você visualize o plano de fundo do mapa enquanto exibe outros elementos geográficos.
Slide 3: Adicionando polígonos e polilinhas
Explicação:
Os polígonos e as polilinhas são usados para adicionar formas geométricas ao mapa. As polilinhas são usadas para desenhar linhas (por exemplo, rotas), enquanto os polígonos são usados para desenhar áreas (por exemplo, parques, edifícios).
Exemplo de uma polilinha:
L.polyline([[48.8566, 2.3522], [48.8569, 2.3525]]).addTo(map);Exemplo de um polígono:
L.polygon([[48.8566, 2.3522], [48.8569, 2.3525], [48.8571, 2.3520]]).addTo(map);Esses elementos podem ser usados para definir áreas de interesse geográfico.
Slide 4: Popups e tooltips
Explicação:
Os marcadores são usados para colocar pontos no mapa e podem ser associados a popups ou dicas de ferramentas. Os pop-ups exibem informações detalhadas quando o usuário clica em um marcador, enquanto as dicas de ferramentas exibem informações temporárias quando o usuário passa o mouse sobre o marcador.
Exemplo de um popup:
L.marker([48.8566, 2.3522]).addTo(map) .bindPopup("Welcome to Paris!") .openPopup();Exemplo de um tooltip
L.marker([48.8566, 2.3522]).addTo(map) .bindTooltip("Paris", { permanent: true, direction: 'top' }) . openTooltip();Slide 5 : LayerGroups
Explicação:
Os grupos de camadas são usados para organizar vários elementos geográficos em um único grupo. Isso facilita a exibição ou ocultação de vários objetos no mapa em uma única operação.
Exemplo de código:
var markers = L.layerGroup([marker1, marker2, marker3]).addTo(map);Aqui, os marcadores são adicionados a um grupo, facilitando o gerenciamento de elementos geográficos no mapa.
Slide 6: Controle de camadas
Explicação:
O controle de camadas permite que o usuário escolha quais camadas mostrar ou ocultar no mapa. Isso inclui a capacidade de ativar diferentes camadas de ladrilhos ou elementos vetoriais, como marcadores ou polígonos. O controle de camadas é um recurso fundamental para mapas interativos.
Exemplo de código:
var baseMaps = { "OpenStreetMap": osmLayer, "Satellite": satelliteLayer};var overlayMaps = { "Markers": markersLayer};L.control.layers(baseMaps, overlayMaps).addTo(map);Isso permite que o usuário alterne entre diferentes camadas de exibição.
Slide 7: Adicionando uma camada GeoJSON
Explicação:
GeoJSON é um formato de dados comumente usado para exibir objetos geográficos. O Leaflet facilita o carregamento de dados GeoJSON e sua exibição como pontos, linhas ou polígonos.
Exemplo de código:
L.geoJSON(geojsonData).addTo(map);Isso permite que dados geográficos externos sejam sobrepostos diretamente no mapa.
Slide 8 : Eventos do usuário
Explicação:
O Leaflet permite que você gerencie os eventos do usuário, como clicar, passar o mouse ou arrastar no mapa. Esses eventos podem ser associados a ações específicas, como a exibição de informações ou a realização de cálculos.
Exemplo de um evento de clique no mapa:
map.on('click', function(e) { alert("You have clicked on the map at " + e.latlng);});Isso adiciona interatividade ao mapa e permite que os usuários interajam diretamente com os elementos geográficos.
Sessão de exercícios 2- Gerenciamento e interação de camadas no Leaflet
Objetivo:
Crie um mapa com vários tipos de camadas vetoriais, organize-as em um grupo, adicione pop-ups e dicas de ferramentas e gerencie os eventos do usuário.
Arquivo a ser criado: exercise-layers.html
Em um editor de texto, copie e cole o código a seguir e salve o arquivo com o nome exercise-layers.html.
<!DOCTYPE html><html><head> <title>Exercice Couches Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <style> #map { height: 500px; width: 100%; } </style></head><body> <h2>Gestion des couches et interactions</h2> <div id="map"></div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script> var map = L.map('map').setView([-20.2, 57.5], 10); // Fond de carte var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var toner = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', { attribution: '© Stamen' }); // ➤ Polygone : zone var zone = L.polygon([ [-20.24, 57.48], [-20.26, 57.50], [-20.25, 57.52], [-20.23, 57.50] ], { color: 'green', fillOpacity: 0.4 }).bindPopup("Zone naturelle").bindTooltip("Zone verte"); // ➤ Polyligne : trajet var ligne = L.polyline([ [-20.17, 57.51], [-20.20, 57.54], [-20.22, 57.52] ], { color: 'blue', weight: 4 }).bindPopup("Trajet principal"); // ➤ Cercle var cercle = L.circle([-20.19, 57.48], { radius: 2000, color: 'red', fillOpacity: 0.3 }).bindPopup("Rayon de 2 km").bindTooltip("Zone d’influence"); // ➤ Couche GeoJSON var geojsonData = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "nom": "Zone agricole" }, "geometry": { "type": "Polygon", "coordinates": [[[57.52, -20.24], [57.54, -20.24], [57.54, -20.22], [57.52, -20.22], [57.52, -20.24]]] } }] }; var geojsonLayer = L.geoJSON(geojsonData, { style: { color: "orange", weight: 2, fillOpacity: 0.5 }, onEachFeature: function (feature, layer) { layer.bindPopup("Nom : " + feature.properties.nom); layer.on("click", function () { console.log("Clic sur " + feature.properties.nom); map.fitBounds(layer.getBounds()); }); } }); // ➤ Groupes de couches var couchesVecteurs = L.layerGroup([zone, ligne, cercle]); var couchesGeoJSON = L.layerGroup([geojsonLayer]); // ➤ Contrôle des calques var fond = { "OpenStreetMap": osm, "Toner Lite": toner }; var donnees = { "Objets vectoriels": couchesVecteurs, "GeoJSON Zones": couchesGeoJSON }; L.control.layers(fond, donnees).addTo(map); // Ajout par défaut couchesVecteurs.addTo(map); couchesGeoJSON.addTo(map); </script></body></html>Instruções:
Alterações sugeridas:
- Adicionar outro polígono GeoJSON com um estilo diferente.
- Personalizar as dicas de ferramentas (adicionar informações úteis).
- Modificar o layer.on(‘click’) para alterar a cor ao clicar ou adicionar um efeito visual.
Visualizar o resultado em uma nova guia.
