O SLD (Styled Language Descriptor) é responsável pela estilização dos layers no GeoServer, trata-se de um arquivo XML baseado nas especificações da OGC.
Neste post será demonstrado como gerar arquivos SLD a partir do software QGIS. Para tanto, utilizaremos uma tabela espacial representando o mapa de uso e cobertura da terra do estado de São Paulo (Figura 1), armazenada em um Banco de Dados Espaciais (PostgreSQL/PostGIS).
 |
| Figura 1 - Mapa Temático no QGIS |
1 - Criação do SLD no QGIS:
Em propriedades da camada (Layer Properties), defina a simbologia de cada classe da sua camada, como mostra a Figura 2.
 |
| Figura 2 - Definição da simbologia |
Em seguida, exporte o arquivo de estilos criado para para o formato SLD (Figura 3), com o nome "uso_ocupacao_solo_solo.sld."
 |
| Figura 3 - Exportação para SLD |
2 - Configuração do arquivo SLD no GeoServer:
Em Style Editor adicione um name e um Workspace ao seu arquivo SLD, na sequência, abra o arquivo uso_ocupacao_solo_solo.sld com algum editor de texto. Copie e cole o SLD para a janela do GeoServer (Figura 4). Obs: não utilize a opção de upload, pois a mesma pode gerar inconsistências no seu arquivo.
 |
| Figura 4 - Configuração do SLD no Geoserver |
Para adicionar o estilo ao seu layer, vá até a aba Edit Layer, na opção WMS Settings e escolha o SLD criado, como mostra a Figura 5.
 |
| Figura 5 - Adição do estilo criado à camada. |
3 - Resultado no Leaflet:
Crie um arquivo html com o contendo o código a seguir:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>São Paulo - Uso e Cobertura da Terra</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> | |
| </head> | |
| <body> | |
| <div id="map" style="width: 100%; height: 800px"></div> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> | |
| <script> | |
| var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + | |
| '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="http://mapbox.com">Mapbox</a>', | |
| mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw'; | |
| var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light'}), | |
| streets = L.tileLayer(mbUrl, {id: 'mapbox.streets'}); | |
| var uso_cobertura = L.tileLayer.wms("http://localhost:8080/geoserver/dados_sao_paulo/wms", { | |
| layers: 'dados_sao_paulo:uso_cobertura', | |
| format: 'image/png', | |
| transparent: true, | |
| version: '1.1.0', | |
| attribution: "myattribution" | |
| }); | |
| var map = L.map('map', { | |
| center: [-22.4719,-47.0928], | |
| zoom: 7, | |
| layers: [grayscale] | |
| }); | |
| var baseLayers = { | |
| "Streets": streets, | |
| "Grayscale": grayscale, | |
| }; | |
| var overlays = { | |
| "Uso e Cobertura da Terra": uso_cobertura, | |
| }; | |
| L.control.layers(baseLayers, overlays).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
O resultado pode ser visto na Figura 6.
 |
| Figura 6 - Leaflet consumindo a camada WMS com o SLD criado |
