Configuração do servidor de mapas Web (Ubuntu)

Instalação Java

Verifique inicialmente se possui o Java instalado e que versão, com o comando:

java -version

Você precisará da versão 8 JRE instalada. Para instalar, digite:

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer

Mais informações, selecione aqui

Instalação GeoServer

Faça o download do GeoServer na versão Platform Independent Binary.

Copie para a pasta /usr/share

instale o descompactador zip com o comando:

sudo apt-get install unzip

Descompacte o arquivo copiado, com o comando:

sudo unzip geoserver-2.13.2-bin.zip -d ./

Será criada uma pasta com o nome geoserver-2.13.2-bin.

Renomeie esta pasta para o nome geoserver.

Adicione uma variável de ambiente para indicar a localização do GeoServer, com o comando:

echo "export GEOSERVER_HOME=/usr/share/geoserver" >> ~/.profile
. ~/.profile

Mude a permissão para você ser o proprietário da pasta, com o comando:

sudo chown -R SEU_NOME_DE_USUARIO_LINUX /usr/share/geoserver/

Inicie o GeoServer, para isso, vá para a pasta:

cd /usr/share/geoserver

e inicie o GeoServer com o comando:

sh startup.sh

Pronto, está funcionando.

Rodando o GeoServer

Em outro computador, abra o navegador e digite o endereço:

http://numero_do_endereço_ip_servidor_geoserver:8080/geoserver

Pronto ele irá iniciar. O usuário é admin e a senha geoserver.

Referências

Instruções de instalação

Instruções da interface administrativa

Configuração do servidor de mapas Web (Windows)

1. Verificar se o Java JRE está instalado. Geralmente está em uma pasta como a C:\Program Files (x86)\Java\jre1.8.0_171. Caso não esteja, instale. Entrar no site do GeoServer. Fazer download da última versão estável 32 bits. No momento de escrita deste documento é a 1.8.0_171. Recomendo desinstalar as versões desatualizadas. Você precisa instalar a versão 32 bits para o GeoServer rodar como serviço.
2. Fazer a instalação. Estamos instalando na pasta C:\Program Files (x86)\GeoServer 2.13.1.
3. Irá aparecer para você selecionar a pasta em que está localizado o Java JRE. Confirme se a mesma, que está como padrão, está correta.
4. Deixe selecionada a pasta em que terá o diretório de dados padrão, c:\Program Files (x86)\GeoServer 2.13.1\data_dir
5. Entre com o login admin e a senha Nexus243, com N maiúsculo.
6. Mantenha a porta 8085.
7. Selecione para instalar como serviço.
8. Após a instalação verifique o o serviço está iniciado.
9. Entre na página http://localhost:8085/geoserver/web/. Caso apresente algum erro ao entrar na página, provavelmente é a versão Java JRE que você tem instalada. Verifique o problema, desinstale o GeoServer e instale novamente a versão correta do Java JRE.
10. Entre com o login e senha.

Configuração do banco de dados geográfico

1. Entre na página do Postgres e faça o download da última versão. Estamos selecionando a versão 10.4.1 64 bits para Windows.
2. Rode a instalação.
3. No Data Directory entre C:\NexusGeoSanWebPostgres_data
4. Na senha entre Nexus243. O usuário ele não pergunta, mas é o postgres.
5. Na porta selecione 5444
6. Deixe as outras opções como as padrões.
7. Selecione o Stack Builder para agora instalarmos a componente geográfica.
8. Selecione a versão do Postgres que você acabou de instalar.
9. Adicione as seguintes componentes:

9.1. Todos os Database Drivers.

9.2. Em Spatial Extensions, selecione o PostGIS 64 bits, caso seu computador seja 64 bits.

9.3. Selecione Next para iniciar as instalações.

9.4. Na instalação do PostGIS, selecione a opção Create spatial database, além da que já vem selecionada. Isto permitirá criar um exemplo de banco de dados espacial.

9.5. No nome do banco de dados espacial entre NexusExemploPostGIS.

9.6. Aceite o registro do GDAL

9.7. Aparecerá a seguinte caixa de diálogo. Utilizaremos no futuro esta informação. Selecione Sim.

9.8. O mesmo para esta outra:

Veja no final que foi instalada uma aplicação com o nome PostGIS Shapefile Import/Export. É o ShapeLoader. Vamos utilizar muito esta aplicação para carregar os mapas existentes no banco de dados geográfico.

Carregando o primeiro mapa

Vamos realizar uma visualização do mapa de municípios brasileiros, para isso faça o download do arquivo shape dos mesmos selecionando aqui. Selecione o arquivo br_municipios.zip.

• Descompacte o arquivo zip.
• Entre o PgAdmin 4, do Postgres, para definirmos o banco de dados.
• Selecione View connection details.

• Configure com os dados da conexão, como mostrado na figura acima.
• Selecione o arquivo shape como mostrado na figura abaixo.

• Selecione Import
• Os limites de municípios serão importados para o banco de dados.
• Entre no Postgres pelo PgAdmin e veja os dados dos mesmos, como na figura abaixo.

Visualização dos municípios no mapa

Agora vamos preparar um ambiente para visualização dos mapas na Web. Nosso foco são as redes, nós, ramais e consumidores do GeoSan, mas inicialmente você irá importar os municípios brasileiros para se ambientar com o sistema.

• Entre no GeoServer no link: http://localhost:8085/geoserver/web/
• Entre com o login: admin e senha: Nexus243
• Foram instalados vários exemplos de dados. Você pode deixar os mesmos. Em nosso caso vamos apagar todos para tornar mais simples o entendimento da interface. Para isso, apague na seguinte sequência (de baixo para cima): Primeiro apague todos os Layer groups, em seguida layers, stores e finalmente todas as workspaces. Caso o seu GeoServer esteja em espanhol ou português, poderá mudar a linguagem do GeoServer mudando a linguagem do seu navegador. É ele quem controla a tradução que é exibida.
• Entre agora em Workspaces para criar um espaço de trabalho, como mostrado na figura a seguir.

• Crie a nova WorkSpace conforme mostrado na figura a seguir:

• Pronto, você tem a WorkSpace criada. Tudo irá girar em torno dela. Você como empresa de saneamento irá criar no futuro uma WorkSpace, provavelmente com o nome da sua empresa de saneamento. Caso esteja realizando a implantação para a Prefeitura também, poderá criar uma WorkSpace com o nome da Prefeitura. A URI será a o endereço do seu site. Veja como ficou na figura a seguir:

• Agora vem uma das partes mais importantes, você informar os seus locais de armazenamento. Por exemplo, o nome do diretório onde encontram-se os seus arquivos no formato shape do GeoSan, ou o banco de dados Postgres do GeoSan em que encontram-se os dados das geometrias das redes, nós, ramais e consumidores de água. Na figura a seguir é mostrada esta parte.

• Selecione Add new store para adicionar um novo local de armazenamento, veja que aparecerão vários tipos de opções de locais de armazenamento, como mostrado na figura a seguir:

• Vamos informar a localização onde estão os arquivos shape que importamos anteriormente para o banco de dados Geográfico do GeoSan. Para isso selecione PostGIS database.

• Uma parte importante agora é especificar corretamente a localização, nome, porta, do banco de dados. As informações que você deve entrar são as que você cadastrou anteriormente.

• As outras opções, deixe como padrão. Selecione Salvar.

• Nesta primeira vez ele irá mostrar neste banco de dados em que selecionou, quais as tabelas que possuem entidades geográficas, em nosso caso brmue250gc_sir, este são os municípios que você importou para o Postgres, anteriormente, com o programa ShapeLoader.

• Selecione esta tabela de municípios.

• Ele irá perguntar uma série de informações. Uma delas é o sistema de projeção cartográfica em que encontra o seu dado. Para mais informações sobre os sistemas de projeção, selecione aqui. Para você saber o sistema de projeção de seu dado, pode verificar no arquivo BRMUE250GC_SIR.prj, abrindo o mesmo com um editor de textos qualquer.

• Outra forma é executando a querie diretamente junto a tabela, como mostrado na figura a seguir. Veja que em nosso caso esta informação não foi importada, a coluna st_srid está vazia. Para mais informações, selecione aqui.

• De qualquer forma você vai informar a projeção como mostrado.

• Também será necessário informar os limites do mapa. Isto é importante para quando pedir para mostrar todo o mapa na tela, ele saber quais são os limites máximo e mínimo. Para isso peça para ele calcular estes limites automaticamente, selecionando em ambos os casos Compute from data.

• Selecione Save para salvar.

• Agora visualize o mapa. Selecione Layer preview.

• Em seguida, selecione Open Layers. O mapa irá aparecer.

Disponibilização do mapa no celular via Web

Para disponibilizar o mapa pela Internet e poder acessar no celular, crie um arquivo com o nome NexusMapa.html, com o seguinte conteúdo:

<html>
    <head>
        <title>NEXUS</title>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
        <div style="width:100%; height:100%" id="map"></div>
            <script defer="defer" type="text/javascript">

            var mercator = new OpenLayers.Projection("EPSG:3857");
            var wgs = new OpenLayers.Projection("EPSG:4326");

            var map = new OpenLayers.Map("map",{
                projection: mercator
                    });

            var images = [];
            var image;

            var oms = new OpenLayers.Layer.OSM("OpenStreeMap");
            images.push(oms);  

            image =  new OpenLayers.Layer.WMS(
                "Redes de água", "http://localhost:8085/geoserver/NexusGeoSanWeb/wms",
                {
                    layers: 'brmue250gc_sir',
                    format: 'image/jpeg',
                    transparent: "true"
                },
                {
                   visibility:true,
                   displayInLayerSwitcher:false,
                } 
            );
            images.push(image);


            var centro = new OpenLayers.LonLat(-46.57,-23.6248019);
            centro.transform(wgs,mercator);

            map.addLayers(images);
            map.setCenter(centro, 9);
        </script>
    </body>
</html>

Veja as alterações que foram realizadas no mesmo, em negrito, como abaixo:

image = new OpenLayers.Layer.WMS(

            "Redes de água", "***http://localhost:8085/geoserver/NexusGeoSanWeb/wms***",

            {

                layers: '***brmue250gc_sir***',

                format: 'image/jpeg',

                transparent: "true"

            },

Mais informações sobre isso selecione aqui

O mapa aparecerá como mostrado na figuras a seguir:

Veja que os polígonos não possuem transparência. Este é o próximo passo, habilitar a transparência.

Configurando a forma de visualização do mapa

Para configurar a transparência nos polígonos, você precisa criar um novo estilo de polígonos transparentes.

• Para isso seleciont Styles.

• Selecione para adicionar um novo estilo, Add styles.

• Selecione para copiar de um estilo já existente Copy from existing style, copie de polígonos. Veja a documentação já existente sobre isso, selecionando aqui.

• Veja que para habilitar a transparência você precisa adicionar a seguinte linha ao arquivo:

<CssParameter name="fill-opacity">0.5</CssParameter>

Adicione a mesma. Aproveite para modificar as cores. Os códigos de cores HTML estão no mesmo link anterior. O código ficará da seguinte forma.

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
  xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd"
  xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc"
  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

  <NamedLayer>
    <Name>poligonoTransparente</Name>
    <UserStyle>
      <Title>Poligono com transparencia</Title>
      <FeatureTypeStyle>
        <Rule>
          <Title>Poligono transparente</Title>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#00cc33
              </CssParameter>
              <CssParameter name="fill-opacity">0.1</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">0.5</CssParameter>
            </Stroke>
          </PolygonSymbolizer>

        </Rule>

      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

• Selecione Validate para verificar se existem erros de sintaxe e em seguida Apply e Submit.

• Agora associe em Layers e Publishing o novo estilo

• Acessando novamente a página HTML, o polígono aparecerá transparente.

• Para que o mapa possa ser acessado no celular, você terá que abrir algumas portas do Postgres e GeoServer, permitindo assim acessar o mapa. Mais informações selecione aqui.