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.