domingo, 17 de março de 2013

Criando e exibindo um WMS com MapServer, PostGIS e Openlayers - Parte 2

Olá galera,

Dando continuidade ao nosso último post, iremos dar carga no banco de dados e criar o mapfile que será chamado pelo Openlayers.

Primeiro baixe o arquivo de estados em formato SQL. Caso você queira usar seu próprio shapefile, pode transformá-lo usando um comando que eu citei no post Alguns comandos úteis para PostgreSQL.

Caso você ainda não tenha instalado o PostgreSQL com PostGIS, recomendo olhar o post Instalando e configurando o PostgreSQL, PostGIS e pgAdmin no Ubuntu 12.04 antes de prosseguir.

Para gerar o banco e dar carga, usei o pgAdmin mas sinta-se a vontade para utilizar inclusive o terminal. É importante utilizar o template do PostGIS ao gerar o banco.

Agora que o banco de dados está pronto, cria na pasta raiz do projeto o arquivo fonts.list e insira o código abaixo:

    ubuntu /usr/share/fonts/truetype/ubuntu-font-family/Ubuntu-R.ttf
  

Esse arquivo indica o caminho e nome da font que vamos utilizar no label do mapfile.

Ainda na pasta raiz do projeto, crie o arquivo codegeo.map e insira o código abaixo:

#
# Mapfile - CodeGeo
#

MAP
  NAME 'codegeo_wms'
  IMAGETYPE PNG
  EXTENT -73.9913940429688 -33.7520141601562 -32.3924560546875 5.27179002761841
  UNITS meters
  SIZE 800 600
  FONTSET '/var/www/codegeo/fonts.list'

#
# Definição da projeção do mapa
#
 
  PROJECTION
    "init=epsg:4326"
  END
 
#
# Formato de imagem que utiliza a biblioteca GD
#
 
  OUTPUTFORMAT
    NAME "aggpng"
    DRIVER "AGG/PNG"
    MIMETYPE "image/png"
    IMAGEMODE RGBA
    EXTENSION "png"
  END

#
# Definição WEB
#
 
  WEB
    TEMPLATE void
    IMAGEPATH "/var/www/codegeo"
    IMAGEURL "http://localhost/codegeo"
    METADATA
      "wms_title" "WMS PNG CodeGeo"
      "wms_onlineresource" "http://localhost/cgi-bin/mapserv?map=/var/www/codegeo/codegeo.map"
      "wms_srs" "EPSG:4326 EPSG:900913"
      "wms_abstract" "Serviço WMS PNG CodeGeo."
      "ows_enable_request" "*"
      "wms_feature_info_mime_type" "text/html"
    END
  END

#
# Camada de Estados do Brasil
#
  
  LAYER
    NAME 'estados'
    CONNECTIONTYPE postgis
    CONNECTION "user=postgres password=1234 dbname=codegeo host=localhost"
    DATA "the_geom FROM estados USING UNIQUE id USING SRID=4326"
    TYPE POLYGON
    STATUS default
    TRANSPARENCY 65
    LABELITEM 'nome'
    LABELCACHE ON

    CLASS
      NAME 'bahia'
      EXPRESSION ([codigo] eq 29)
      LABEL
        COLOR 0 0 0
        FONT ubuntu
        TYPE TRUETYPE
        POSITION CC
        PARTIALS FALSE
        SIZE 9
        BUFFER 5
        OUTLINECOLOR 255 255 255
      END
      STYLE
        OUTLINECOLOR 0 0 0
        COLOR 187 117 0
      END
    END

    CLASS
      NAME 'padrao'
      LABEL
        COLOR 0 0 0
        FONT ubuntu
        TYPE TRUETYPE
        POSITION CC
        PARTIALS FALSE
        SIZE 9
        BUFFER 5
        OUTLINECOLOR 255 255 255
      END
      STYLE
        OUTLINECOLOR 0 0 0
        COLOR 155 137 123
      END
    END
  END
 
END

De um forma geral, o mapfile criado vai exibir todos os Estados do Brasil com seus respectivos nomes e com a Bahia em destaque.

Farei um comentário das linhas que possuem uma relevância.

Linha 11 - Caso pretenda utilizar um outra fonte ou esteja usando um sistema operacional diferente, certifique-se de setar o caminho correto para a fonte do seu sistema.

Linha 58 - Certifique-se de fazer as alterações para as configurações da sua máquina.

Linha 63 - Esse é o campo da tabela utilizado para exibir qual o conteúdo estará no label do mapa.

Linha 68 - Nesse trecho, o campo da tabela codigo é igualado ao valor do código da Bahia no banco de dados.

Para finalizar, antes da linha que contém o código map.setCenter( no arquivo project.js, insira o trecho abaixo:

    var estados = new OpenLayers.Layer.WMS("Estados",
      "http://localhost/cgi-bin/mapserv?map=/var/www/codegeo/codegeo.map",
      {
        layers: "estados",  
        transparent: true
      },
      {
        isBaseLayer: false,
        visibility: false,
        singleTile: false
      }
    );

    map.addLayers([estados]);
  

No trecho acima, seto o caminho onde nosso mapfile está e qual layer vamos exibir.

O resultado final deve se parecer com a imagem abaixo:

A versão final do nosso aplicativo pode ser baixado clicando aqui.

Um abraço e até a próxima.

13 comentários:

  1. Bom dia Benicio,

    Tentei adicionar meu layer que esta na projeção EPSG:29101, mas não é exibida minha imagem. Você poderia me ajudar por favor?!!!

    Fernanda.

    ResponderExcluir
    Respostas
    1. Bom dia Fernanda,

      Como você está usando uma projeção diferente, além do projection no OpenLayers, vai ser necessário acrescentar o displayProjection: new OpenLayers.Projection("EPSG:29101").

      No MapServer também será necessário fazer alteração da projeção 4326 para a sua.

      Caso ainda apresente algum erro, será necessário "registrar" a sua projeção incluíndo a chamada de dois arquivos javascript com os seguintes links http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js e http://spatialreference.org/ref/epsg/29101/proj4js/

      Um abraço

      Excluir
  2. Olá Benicio, obrigada pela dica...
    No entanto, ainda não consegui. Testei inclusive o seu exemplo, criando o banco e adicionando o "estados".
    Quando habilito o estados também acontece da imagem não ser exibida.
    Tem alguma ideia do que pode ser?.
    Obrigada,
    Fernanda

    ResponderExcluir
    Respostas
    1. Olá Fernanda,

      Terminei de fazer o download do arquivo de exemplo aqui. Tive que mudar no .map o nome do banco de dados e a senha para fazer funcionar. Você chegou a fazer alguma alteração nos códigos?

      Abraço

      Excluir
  3. Bom dia!!
    As alterações que fiz no exemplo foram:
    No codegeo.map foram:
    FONTSET 'C:/codegeo/fonts.list'
    IMAGEPATH "C:/codegeo"
    IMAGEURL "C:/codegeo"
    "wms_onlineresource" "http://localhost:8088/cgi-bin/mapserv.exe?map=C:\codegeo\codegeo.map"
    CONNECTION "user=postgres password='5n7Em1p' dbname=codegeo host=localhost"

    E no project.js alterei:

    var estados = new OpenLayers.Layer.WMS("Estados",
    "http://localhost:8088/cgi-bin/mapserv.exe?map=C:/codegeo/codegeo.map",
    {layers: "estados", transparent: true},
    {isBaseLayer: false,visibility: false,singleTile: false}
    );
    map.addLayers([estados]);

    Quando tento habilitar o "estados" ele não aparece a imagem de estados e sim uma imagem com fundo rosa.
    Se puder passar seu contato, agradeço muito pela ajuda, pois não consegui avançar nos meus estudos.
    Muito obrigada, abraços,
    Fernanda




    ResponderExcluir
    Respostas
    1. Bom dia Fernanda,

      Você está acessando a aplicação com http://localhost:8080 também? É importante que a url da aplicação e do acesso MapServer seja as mesmas. De qualquer forma, seguem os meus contatos GTalk: larsurilch@gmail.com e Skype:larsurilch. A noite devo estar online.

      Um abraço

      Excluir
    2. Boa tarde. Sei que já faz algum tempo do último post, mas estou tentando reproduzir o exemplo e estou com o mesmo problema da Fernanda. Quando habilito a camada estados aparece uma imagem de fundo rosa. Alguma dica para solucionar? Obrigada. Daiana

      Excluir
    3. Olá. Já faz um tempo do último post sobre esse exemplo, mas estou agora tentando reproduzir e estou com o mesmo problema reportado pela Fernanda. Quando habilito a camada estados aparece uma imagem rosa e a camada não é carregada. Alguma dica de como resolver esse problema?
      Obrigada!

      Excluir
    4. Boa noite Daiana,

      Você já analisou a requisição que traz o layer do mapserver? Utilizando o Chrome pede pra abrir em uma nova aba que ele vai exibir o erro. Fica mais fácil de debugar.

      Abraço

      Excluir
  4. Benicio,
    Esqueci de comentar minha máquina é Windows 7 64bits...
    Fernanda.

    ResponderExcluir
    Respostas
    1. Sem problemas. Acredito que esse não seja o motivo do erro não.

      Excluir
  5. Como faz isso usando o OpenLayers 3.1 ?

    ResponderExcluir
    Respostas
    1. Olá Douglas,

      Você pode usar Tile ou Image. Segue em anexo exemplos do próprio site do OpenLayers

      http://openlayers.org/en/v3.1.1/examples/wms-tiled.html
      http://openlayers.org/en/v3.1.1/examples/wms-image.html

      Um abraço

      Excluir