Universidade Eduardo Mondlane

Faculdade de Ciências

Departamento de Matemática e Informática

Licenciatura em Ciências de Informação Geográficas

Desenvolvimento de Web SIG com PostGIS,

GeoServer e Leaflet
Secção Laboratorial VIII - II

2019

Edson Inguane

0
 1. Objectivos de aprendizado
Nesta secção vamos criar uma Base de Dados PostGIS, na qual poderemos armazenar com recurso
ao software QGIS, informações sobre o espaço geográfica de formato shapefile (.shp). Iremos à posterior
publicar estas informações num servidor de mapas (GeoServer), com vista à requisita-las na página
WebSIG desenvolvida na secção anterior.

1.1 Requisitos

Para exibirmos dados geográficos na página WebSIG, iremos precisar de três principais softwares:

• PgAdmin III – para concepção da base de dados PostGIS;

• QGIS – para importação de dados geográficos na base de dados;
• GeoServer – para publicação de tabelas PostGIS;
• Um Editor de Texto à sua escolha. Neste tutorial iremos usar o “Sublime Text 3”.

Nota: É recomendável o acesso à internet para o acompanhamento deste tutorial.

1. Concepção da Base de Dados Espacial

Como primeira etapa desta secção, vamos criar uma base de dados para armazenar dados geográficos.

No entanto, vamos usar uma extensão do PostgreSQL denominada PostGIS, esta que nos permitirá
a manipulação de dados espaciais. Esta extensão possui uma ferramenta para administração de bases
de dados espaciais chamada pgAdmin III.

1. Inicie o software pgAdmin III ( ) no seu computador:

• Uma vez instalado o pgAdmin III, é necessário que se conecte a um servidor. No nosso caso
iremos utilizar um servidor local “localhost”.

• Agora faça clique direito sobre “PostgreSQL 9.4” no painel esquerdo “Object Browser” e
seleccione a opção “connect” (Insira a senha caso seja solicitado).

1
• O servidor é agora exibido à esquerda no painel “Object Browser”, e você poderá navegar
em torno das tabelas da base de dados. Caso seja a primeira vez a utilizar PostgreSQL, apenas
duas tabelas estarão disponíveis, incluindo uma base de dados espacial (postgis_21_sample)
criada durante a instalação do PostGIS, e uma base de dados por defeito denominada postgres
em cada instalação do servidor PostgreSQL.

• Agora estenda a Database e inspecione as bases de dados existentes.

2
2. Crie uma base de dados com o nome “WebGISdata” pertencente à postgres:

• Faça clique direito sobre “Database” e

seleccione “New Database”. Agora a base de dados “WebGISdata” aparece em

Database. Inspecione agora a sua
base de dados

3
 Repare que ainda não temos tabelas em nossa
base de dados. Todavia, não iremos focar na
criação de novas tabelas, vamos simplesmente
importar tabelas com geometria.

3. Adicione uma extensão espacial postgis na base de dados

• Na base de dados “WebGISdata” faça clique direito sobre “Extensions” e

seleccione
“New Extensions”, e defina como nome da extensão “postgis”
Clique em “Ok”.

• Como alternativa para a criação da extensão postgis, clique em “Execute

arbitrary SQL

4
 queries” ( ). Insira o seguinte script:

4. Adicionar dados geográficos na base de dados

Agora que temos a base de dados criada, podemos adicionar nela dados geográficos. Para tal
precisaremos do software QGIS instalado.

1. Abra um projecto QGIS existente e inspecione os dados

• No “File Explorer” do seu computador, navegue para “C:\Projecto WebSIG\data” e

abra o seguinte arquivo de projecto QGIS: “Aula_VIII_II.qgz”.

• Inspecione as propriedades da camada vectorial exibida no QGIS.

2. Identifique o sistema de coordenadas actual do projecto:

5
 • No canto inferior direito da janela do Mapa QGIS, clique no botão rotulado “EPSG:
32736”.

• As propriedades do Projecto | A janela SRC abrirão e exibirá informações sobre a

projecção actual;

• A projecção actual é WGS 84 / UTM zone 36S. As informações relevantes são mostradas
incluindo uma pequena janela do mapa abaixo de SRC Selecionado.

3. Alterar o CRS do projecto para Web Mercator/ Pseudo Mercator (EPSG: 3857)

• Uma vez que o destino destes dados é a Web, é comum que se utilize um Sistema de
Coordenadas ideal para mapas da Web (Web Mercator), havendo no entanto a necessidade
de reprojectar estes dados;

• Na caixa de filtro escreva o código do EPSG “3857” e seleccione na caixa “Coordinate

Reference System of the World”, WGS84 / Pseudo-Mercator.

• Clique em Apply de seguida Ok.

6
4. Reprojectar a camada “Províncias”:

• Vamos agora alterar a projecção da camada para a mesma do projecto;

• Localize e execute a ferramenta de reprojecção de camadas, por localização da caixa de
ferramenta de processamento “Processing Toolbox;

• No menú principal, seleccione o menú “Processing →Toolbox”;

• Na janela de busca, no topo da caixa de ferramentas, digite “Reproject” para filtrar as
ferramentas e identificar “Reproject Layer”;

• Faça duplo clique em “Reproject Layer”.

7
 • Seleccione como “Input Layer” a camada “Províncias” e especifique o CRS
“PseudoMercator”, e de seguida especifique o directório e o nome do shapefile
reprojectado;

• Clique em “Save” de seguida em “Run” para executar.

5. Criar nova conexão da Base de Dados

• Queremos agora importar a camada “Províncias” para a nossa base de dados;

• No QGIS identifique a ferramenta “PostGIS” faça clique direito e seleccione “New
Connection” para estabelecer nova conexão PostGIS;

• A janela de conexão abrirá. Atribua como nome da conexão “Web_data”, mantenha a

porta 5432, e indique o nome da base de dados “WebGISdata”.

• Autentifique-se com as credenciais criadas durante a instalação do PostGIS;

• Teste a conexão para identificar quaisquer falhas na autenticação;
• Clique Ok se estiver tudo bem, caso contrário, rectifique as suas credenciais.

8
6. Importar camadas na base de dados

• No menú principal do QGIS, clique sobre o menú “Database” e seleccione o submenu

“BD Manager”;

• A janela do gestor de Base de Dados “BD Manager” abrirá;

• No painel “Providers” estenda PostGIS e seleccione a base de dados “Web_data”
correspondente à “WebGISdata”;

• No painel direito “info”, podemos ver a informação da base de dados;

9
• De seguida, na barra de ferramentas, clique em “Import Layer/File” para importar a
camada vectorial “Províncias”;

• A janela de importação de camadas abrirá. Seleccione como input a camada

“Províncias” e de seguida clique em “Update Options” e seleccione “Public” em
Schema.

10
 • Clique em “Ok”.
• Inspecione a base de dados no “DB Manager”

.
5. Publicar tabelas do PostGIS no servidor de Mapas GeoServer
11
 1. Iniciar o GeoServer:

• Inicie o GeoServer clicando no “Start” ( ) do seu computador e pesquise por

“Start

GeoServer” ( ), Clique sobre o ícone. Uma tela preta irá abrir e terminar de
imediato;

• Agora abra um navegador do seu computador e navegue

para:
[Link]

• Efectue o login com utilizador: admin e senha: geoserver.

Repare no lado direito da página inicial do GeoServer (1), a descrição dos serviços disponíveis em
GeoServer, dos quais é destacado o WMS (Web Map Service) (1.1), por ser um protocolo padrão
suportado pelo Leaflet. Foi desenvolvido para servir de imagens de mapas georreferenciadas pela
Internet. Estas imagens são tipicamente produzidas por um servidor de mapas (como o GeoServer) a
partir de dados fornecidos por uma Base de Dados Espacial.

2. Publicar uma camada do tipo PostGIS

12
Nesta etapa vamos publicar uma camada directamente da base de dados PostgreSQL com
PostGIS.

• O primeiro passo consiste em criar uma “Workspace” para o shapefile, um espaço que
poderá ser usado posteriormente para agrupar um conjunto de camadas;

• Após fazer login na página inicial do GeoServer, clique em “Workspace” no painel

esquerdo da página;

• Para criar a “Workspace” clique em “Add new workspace” ( ).

• Defina agora um nome para a “workspace”, ou seja, um identificador que descreva o

projecto (exemplo: WebGIS_project) e um “Namespace URI” (Uniform Resource
Identifier), por exemplo, um endereço web que represente o projecto no qual estamos a
trabalhar;

• Seleccione o “workspace” como padrão (default) e clique em “Submit”.

13
• O próximo passo é a criação de uma “Store” para o shapefile, ou seja, uma entidade
para representar este shapefile.

• Agora abra a página “Stores” e clique no botão “Add new Store” para criar uma nova
store;

• Na página “New data source” seleccione “PostGIS – PostGIS Database”:

14
 1 – Seleccione a “workspace”
criada anteriormente.
2 – Defina um nome para a fonte de dados
(dmi_sig);
2 – Pequena descrição;
3 – Parâmetros de conexão com a base de dados.

• Clique em “Save” para gravar.

• Agora podemos visualizar na página uma tabela com as camadas disponíveis na base
de dados “Provincias_repr”.

15
 • Clique em “Publish” para publicar a camada “Provincias_repr”;
• Uma página de edição de camada será exibida;
• Defina o nome da camada (Províncias), projeção (Web-Mercator), e gere
automaticamente os “Bounding Boxes”;

• Clique em “Save” para gravar;

3. Pré visualização de camadas

• No painel esquerdo da página em “Data”, clique sobre “Layer Preview” para ter uma pré
visualização da camada publicada;

• Na caixa de pesquisa, filtre pelo nome a camada publicada;

16
• Repare que, o nome da camada configurada no GeoServer é composto pelo nome da
“Workspace”, seguido de dois pontos e nome do shapefile carregado:
“WebGIS_project: Províncias_repr”.

• Identifique a camada e clique em “OpenLayers”;

• Inspecione a camada exibida no mapa;

17
 4. Requisitar uma camada do GeoServer no Leaflet
Nesta etapa, vamos exibir na página WebSIG desenvolvida na secção anterior, a camada publicada no
GeoServer.

As camadas publicadas no GeoServer podem ser obtidas utilizando requisições WMS e WFS em uma
página WebSIG, ou mesmo em um software desktop, como o QGIS.

Antes de iniciarmos com a codificação para exibição de camadas, inspecione o seguinte directório:
“C:\Projecto WebSIG\lib\plugins”. Repare que foi adicionado um ficheiro .js. Você pode baixar
este ficheiro em: [Link] ou directamente em
[Link] Esta extensão do leaflet permite
manipular camadas WMS de forma mais robusta. (veja a documentação em [Link]
Porém a biblioteca Leaflet por si só já suporta camadas WMS, embora problemáticas, por exemplo
quando se trabalha com mapas em pequenas escalas, ou quando se trabalha com sobreposições de
múltiplas camadas. Para estas aplicações recomenda-se o uso da extensão [Link].

1. Identifique a url da camada wms:

• Copie uma parte da url do “OpenLayers map preview” até “wms?”

18
2. Iniciar o editor de texto “Sublime Text 3”:

• Navegue para a aba do ficheiro [Link];

• No código, antes da variável “BaseMaps” defina uma variável (var layer_url) para
conter a url copiada;

• Instancie um objecto wms passando os seguintes parâmetros:

i. url_layer;
ii. layers – indicando como atributo o nome da camada wms;
iii. format – indicando o formato da camada (uma imagem no formato png); iv.
transparent – indicando true para que a camada seja transparente (nota:
somente imagens no formato png suportam transparência);

• Altere o nível de zoom para 5.

19
Clique em “File→Save All” e corra o ficheiro [Link] no navegador.

20