GeoSanNaWeb Page History


Download GeoServer

Selecione aqui para escolher a versão que deseja realizar o download e instalar.

Acentuação nas páginas HTML

Para acentuar, caso esteja utilizando o editor Notepad++ lembre-se sempre de selecionar antes de digitar os caracteres acentuados, a opção Formatar - Codidificação em UTF-8. Se não fizer isso a codificação que aparecerá na página será outra e o caractere não aparecerá acentuado.

Ná página inserir:

<header><title>DAE - GeoSan á Celular</title></header>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
...
</head>

Material de treinamento

Selecione aqui para obter materiais de treinamento.

Para acessar a documentação OpenGeo, selecione aqui

Para documentação do GeoExt, selecione aqui

Para exemplos do GeoExt, selecione aqui

Login padrão do Postgis

Login: postgres
Senha: opengeo

Login padrão GeoServer

Login: admin
Senha: geoserver

Perda da atribuição de administrador

Caso você tenha retirado acidentalmente o seu privilégio de administrador de conta não poderá mais acessar o painel do GeoServer, para isso edite o arquivo C:\ProgramData\Boundless\OpenGeo\geoserver\security\role\default\roles.xml e adicione novamente o role de administrador para seu usuário, como no exemplo abaixo:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<roleRegistry xmlns="http://www.geoserver.org/security/roles" version="1.0">
<roleList>
<role id="ADMIN"/>
<role id="GROUP_ADMIN"/>
</roleList>
<userList>
<userRoles username="admin">
    <roleRef roleID="ADMIN"/>
</userRoles>
</userList>
<groupList/>
</roleRegistry>

Mais informações, selecione aqui

Outras informações

Para informações sobre conexão com o banco de dados Postgres selecione aqui

Para informações sobre como conectar/criar um banco de dados geográfico com PostGis, selecione aqui

Para informações sobre tipo de geometria multipolygon selecione aqui

Ao acessar a página do GeoServer em http://localhost:8080/geoserver/web/ utilize os seguintes dados para login:

Login: admin
Senha: geoserver

Para acessar os exemplos possíveis com OpenLayers selecione aqui

Para ver como acessar um WPF User Control a partir de uma aplicação WPF, selecione aqui ou assista ao vídeo selecionando aqui. Outro vídeo, selecione aqui

Copiando as páginas do GeoSanWeb para o servidor

O GeoSanWeb utilizar as tecnologias Node.js e Bootstrap para a disponibilização das páginas Web. Para isso é necessário copiar os arquivos padrão das páginas em HTML e Javascript para o servidor. Para isso siga clone o repositório GeoSanWeb para a sua máquina de desenvolvimento. Instruções de como clonar, selecione aqui.

Linguagem do GeoServer

Para configurar a linguagem do GeoServer, configure no navegador. O GeoServer irá seguir a linguagem configurada no seu browser.

Estrutura de diretórios do GeoSanWeb

master - contém os arquivos fonte, organizados por componentes. Cada componente pode conter arquivos JADE/HTML, LESS e JS.

  • JADE - é um arquivo de template que facilita a programação HTML, retirando os símbolos conhecidos do HTML. Para mais informações, selecione aqui. Você escreve em JADE e o GULP automaticamente converte em HTML colocando o arquivo no diretório de aplicações em app\views.

  • LESS - é um pré-processador para arquivos .css, que adiciona facilidades e permite variáveis e funções. Para mais informações, selecione aqui. Você escreve em LESS e o GULP automaticamente converte em CSS colocando o arquivo no diretório de estilos app\css.

  • JS - são os arquivos contendo as programações em JavaScript. O GULP ao processar irá juntar todos os arquivos JavaScript existentes e colocar em um único arquivo app.js no diretório de aplicação app\js.

master\components - são diretórios contendo cada componente do servidor de mapas via Web do GeoSanWeb. Quando o GULP roda, ele vai compilar estes arquivos e enviar os mesmos para os respectivos diretórios da pasta app.

Componentes do GeoSanWeb

No diretório master\components existem outros sub-diretórios onde cada componentes de mapa está disponibilizada. Isto facilita o gerenciamento dos mapas disponibilizados. Dentro destes subdiretórios podem existir os seguintes arquivos (citamos um exemplo básico para acesso de mapas do Google):

agua.jade

É a página HTML antes da compilação de JADE para HTML, por exemplo:

.container.container-lg
    p Mapas temáticos de água

o que equivale em HTLM depois de compilada pelo GULP a:

<div class="container container-lg">
  <p>Mapas temáticos de água</p>
</div>

agua.less

Representa o arquivo LESS antes da compilação do GULP para CSS

agua.menu.js

JavaScript contendo a estrutura do menu para esta componente específica, por exemplo:

(function() {
    'use strict';

    angular
        .module('app.agua')
        .run(aguaRun);

    aguaRun.$inject = ['Menu'];

    function aguaRun(Menu) {

        var menuItem = {
            name: 'Mapas água',
            sref: 'app.agua',
            order: 1,
            imgpath: 'app/img/icons/maps-mark.svg',
            subitems: [{
                name: 'Mapa temático 1',
                sref: 'app.agua.tem01'
            }, {
                name: 'Mapa temático 2',
                sref: 'app.maps.google'
            },{
                name: 'Mapa temático 3',
                sref: 'app.maps.vector'
            }]
        };

        Menu.addItem(menuItem);

    }
})();

Note que neste exemplo existe um menu Mapas água com uma referência sref: 'app.agua' e um sub-menu Mapa temático 1' com uma referência sref: 'app.agua.tem01'

agua.route.js

Contém as rotas para chamar as páginas HTML e os respectivos títulos das páginas. Um exemplo é mostrado a seguir:

(function() {
    'use strict';

    angular
        .module('app.agua')
        .run(aguaRoute);

    aguaRoute.$inject = ['Router'];

    function aguaRoute(Router) {

        Router.state('app.agua', {
                url: '/agua',
                title: 'Mapas Temáticos',
                abstract: true,
                template: '<div ui-view class="ng-fadeInLeftShort"></div>'
            })
            .state('app.agua.tem01', {
                url: '/tem01',
                title: 'Mapa temático água 1',
                templateUrl: 'tem01.html',
                require: ['lodash', 'uiGmapgoogle-maps']
            });
    }

})();

Note o apontamento para a página HTML que será gerada automaticamente a partir do arquivo .less, templateUrl: 'tem01.html', no sub-menu.

Note também que foi configurada a URL do sub-menu url: '/tem01' no sub-menu 'app.agua.tem01'.

agua.module.js

Contém as informações do módulo. Como por exemplo:

(function() {
    'use strict';

    angular
        .module('app.agua', []);
})();

tem01.jade

Este é o arquivo do sub-menu, em JADE que será convertido automaticamente para HTML pelo GULP. Neste caso temos um exemplo de mapa do Google. O exemplo de arquivo deste sub-menu em JADE é:

.container-full(ng-controller="ControladorMapaTematico01 as gmapfull")
    .row.fh.bg-white
        .col-md-3.fh.hidden-sm.hidden-xs.pr0
            .p-lg
                h5.text-center(ng-if="gmapfull.myMarkers.length") Cidades
                p.text-center Selecione uma cidade
            .list-group.list-group-unstyle
                a.list-group-item(ng-repeat='marker in gmapfull.myMarkers', href="", ng-click='gmapfull.myMap.panTo(marker.position.getPosition())')
                    em.pull-right.ion-ios-arrow-forward
                    | {{marker.name}}
        .col-md-9.fh.pl0
            ui-gmap-google-map.fh(center='gmapfull.map.center', zoom='gmapfull.map.zoom', draggable='true', options='gmapfull.mapOptions')
                ui-gmap-marker(ng-repeat='marker in gmapfull.myMarkers', coords='marker.coords', idkey='marker.id')

que após ser convertido pelo GULP em HTML, ficará:

<div ng-controller="ControladorMapaTematico01 as gmapfull" class="container-full">
  <div class="row fh bg-white">
    <div class="col-md-3 fh hidden-sm hidden-xs pr0">
      <div class="p-lg">
        <h5 ng-if="gmapfull.myMarkers.length" class="text-center">Cidades</h5>
        <p class="text-center">Selecione uma cidade</p>
      </div>
      <div class="list-group list-group-unstyle"><a ng-repeat="marker in gmapfull.myMarkers" href="" ng-click="gmapfull.myMap.panTo(marker.position.getPosition())" class="list-group-item"><em class="pull-right ion-ios-arrow-forward"></em>{{marker.name}}</a></div>
    </div>
    <div class="col-md-9 fh pl0">
      <ui-gmap-google-map center="gmapfull.map.center" zoom="gmapfull.map.zoom" draggable="true" options="gmapfull.mapOptions" class="fh">
        <ui-gmap-marker ng-repeat="marker in gmapfull.myMarkers" coords="marker.coords" idkey="marker.id"></ui-gmap-marker>
      </ui-gmap-google-map>
    </div>
  </div>
</div>

tem01.controller.js

Este arquivo contém apenas o Javascript da componente deste menu.

JavaScript comum a todos os módulos

Caso possua uma função JavaScript que deseje colocar disponível em todos os módulos, você pode fazê-lo indo no diretório GeoSanWeb\master\components\preloader. Lá existe um arquivo com o nome preloader.directive.js no qual poderá colocar a sua função JavaScript desejada. A função que acerta a altura do iframe está lá.

Como acertar a altura do iframe do mapa?

Escreva uma função JavaScript contendo:

<script>
function resize_iframe()
{
    var height=window.innerWidth;//Firefox
    if (document.body.clientHeight)
    {
        height=document.body.clientHeight;//IE
    }
    //resize the iframe according to the size of the
    //window (all these should be on the same line)
    document.getElementById("glu").style.height=
        parseInt(height - document.getElementById("glu").offsetTop-180)+"px";
}
window.onresize=resize_iframe;
</script>

Depois no iframe coloque da seguinte forma:

<div>
   <iframe id="glu" style="border: none;" height="100%" width="100%" src="http://192.168.1.19:8080/geoexplorer/viewer/#maps/2" onload="resize_iframe()"> </iframe>
</div>

Para mais informações/fonte, selecione aqui

Erro no IE

Caso apresente um erro nesta rotina no Internet Explorer, siga o procedimento:

  1. Clique em "Iniciar" pesquise por “Opções da Internet” (sem aspas);

  2. Selecione "Opções da Internet";

  3. Escolha a guia "Avançadas";

  4. Na parte inferior da janela há a opção "Redefinir...";

  5. Marque a opção "Excluir configurações pessoais" e clique em "Redefinir". Em seguida clique em "Fechar";

  6. Teste o navegador novamente.

Atualizações no banco de dados

20170321054400 - Remoção acentuação

Tabela arc possui os trechos de rede de água. Foram removidas as acentuações de algumas colunas, uma vez que o mapeamento temático via Web não reconhece as mesmas no momento de criação dos filtros.

UPDATE gw_saa.man_type_fluid SET id = 'PRIMARIA' WHERE id = 'PRIMÁRIA' 

UPDATE gw_saa.arc SET fluid_type = 'PRIMARIA' WHERE fluid_type = 'PRIMÁRIA'
UPDATE gw_saa.man_type_fluid SET id = 'SECUNDARIA' WHERE id = 'SECUNDÁRIA'  

UPDATE gw_saa.arc SET fluid_type = 'SECUNDARIA' WHERE fluid_type = 'SECUNDÁRIA'
INSERT INTO gw_saa.man_type_fluid (id,observ) VALUES ('DESCONHECIDA','Tipo de rede não cadastrada')

UPDATE gw_saa.arc SET fluid_type = 'DESCONHECIDA' WHERE fluid_type IS NULL

Desenvolvimento de aplicações personalizadas

Selecione aqui para uma introdução em como desenvolver uma aplicação personalizada com GeoServer.

Criação de uma aplicação de visualização

Para criar uma nova aplicação de visualização com OpenLayers3, abra a janela de comandos do Windows e vá para o diretório C:\Program Files (x86)\Boundless\OpenGeo\sdk\bin e rode o seguinte comando:

#!javascript
suite-sdk create c:\desenv\myAppTeste ol3view

Veja que o diretório será criado e que no diretório C:\Desenv\myappTeste\src\app existirá um arquivo Javascript com o nome app.js, no qual você poderá colocar as suas personalizações no padrão Openlayers.

A seguir é mostrada a configuração inicial

#!javascript
// ========= config section ================================================
var url = '/geoserver/ows?';
var featurePrefix = 'WSDAE';
var featureType = 'v_arc';
var featureNS = 'http://nexusbr.com';
var srsName = 'EPSG:900913';
var geometryName = 'the_geom';
var geometryType = 'MultiPolygon';
var fields = ['arccat_id'];
var layerTitle = 'v_arc';
var infoFormat = 'application/vnd.ogc.gml/3.1.1'; // can also be 'text/html'
var center = [-5185535.783,-2707764.696];
var zoom = 13;
// =========================================================================

Para ativar o serviço de disponibilização de mapas, rode o seguinte comando:

#!javascript
suite-sdk debug c:\Desenv\myappTeste

O resultado da mesma, no endereço http://localhost:9080/, é o apresentado na figura a seguir:

appView.PNG

Verificar XLM Mapa

#!html
http://localhost:8080/geoserver/ows?service=WFS&amp;request=DescribeFeatureType&amp;version=1.0.0&amp;;typename=WSDAE:arc

Verificar. Ainda não está correto

Aumento do número de zooms no mapa

Quando você está no Composer do GeoExplorer, para aumentar o número de zooms no mapa você terá que editar o arquivo

C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoexplorer\WEB-INF\app\static\script*GeoExplorer.js*

Altere o número de zooms para 26, na linha numZoomLevels: mapConfig.numZoomLevels || 26, conforme abaixo:

#!javascript
this.mapPanel = Ext.ComponentMgr.create(Ext.applyIf({
            xtype: config.xtype || "gx_mappanel",
            map: Ext.applyIf({
                theme: mapConfig.theme || null,
                controls: mapConfig.controls || [
                    new OpenLayers.Control.Navigation({
                        zoomWheelOptions: {interval: 250},
                        dragPanOptions: {enableKinetic: true}
                    }),
                    new OpenLayers.Control.PanPanel(),
                    new OpenLayers.Control.ZoomPanel(),
                    new OpenLayers.Control.Attribution()
                ],
                maxExtent: mapConfig.maxExtent && OpenLayers.Bounds.fromArray(mapConfig.maxExtent),
                restrictedExtent: mapConfig.restrictedExtent && OpenLayers.Bounds.fromArray(mapConfig.restrictedExtent),
                numZoomLevels: mapConfig.numZoomLevels || 26
            }, mapConfig),
            center: config.center && new OpenLayers.LonLat(config.center[0], config.center[1]),
            resolutions: config.resolutions,
            forceInitialExtent: true,
            layers: [new OpenLayers.Layer(null, baseLayerConfig)],
            items: this.mapItems,
            plugins: this.mapPlugins,
            tbar: config.tbar || new Ext.Toolbar({
                hidden: true
            })
        }, config));

Sobre o mapa

C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoexplorer\WEB-INF\app\templates\composer.html - Contém os mapas que são abertos inicialmente no composer e alguns dados da NEXUS.

C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoexplorer\WEB-INF\app\templates\viewer.html - Contém sobre a visualização, quando o mapa é salvo. Ele lê este arquivo no momento de visualizar.

C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoexplorer\WEB-INF\app\templates\base.html - Contém as chamadas para os arquivos Javascript e css, o título da página Web e a ícone favorita.

C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoexplorer\WEB-INF\app\static\script\GeoExplorer.js - Contém dados da caixa de diálogo About entre outras coisas.

C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoexplorer\WEB-INF\app\static\about.html - Contém o texto sobre o GeoSanWeb.

C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoexplorer\WEB-INF\app\static\theme\app\img - Contém a ícone do favorito, favicon.ico, que é mostrada no topo da página Web.

Log do sistema

Os arquivos de log do Geoserver, podem ser encontrados no diretório C:\Program Files (x86)\Boundless\OpenGeo\jetty\logs.

Workspace

A Workspace é o local onde ficam os arquivos vetoriais e raster. O diretório da mesma geralmente é algo similar a:

#!javascript
C:\ProgramData\Boundless\OpenGeo\geoserver\workspaces

Pasta de imagens TMS

Recomenda-se armazenar as imagens TMS nesta Workspace, em nosso caso utilizamos a pasta C:\ProgramData\Boundless\OpenGeo\geoserver\workspaces\espacodae\gis

Pasta de imagens Tif

As imagens podem também vir a ser salvas no formato bruto Tif. Em nosso caso ela está armazenada em: C:\ProgramData\Boundless\OpenGeo\geoserver\workspaces\espacodae\gis\tms com o nome saoCaetano.tif.

Referências

Manual SDK

Exemplo simples Openlayers

Vídeo sobre criação e deploy de uma aplicação com OpenGeo

GeoExt-1

GeoExt-2

GeoExt-3

Operações OGC com inserção e seleção de features

Desenho de polígonos

Desenho de polígonos 2

Workshop OpenLayers

Criação de gráficos

Encontrar features dentro de um polígono

Implementação de serviço WPS

Impressão

A impressão dos mapas pela Web é realizada através da geração de arquivos PDF que podem vir a ser impressos posteriormente.

Para a realização da impressão de mapas pela Web é utilizado a extensão de impressão do GeoServer. Após a instalação do GeoServer, pode acontecer de ao selecionar o botão de impressão, o mesmo não abrir a caixa de impressão ou mesmo estar cinza. Isto pode ser devido a extensão de impressão não ter sido instalada.

Instalação da extensão de impressão

O primeiro passo para instalar a extensão de impressão do GeoServer é necessário verificar inicialmente a versão do GeoServer que está instalada. Estamos utilizando a versão 2.8-SNAPSHOT. A versão instalada pode ver verificada na opção Sobre o GeoServer, na página principal do mesmo.

Para obter a extensão de impressão, 2.8-SNAPSHOT, selecione aqui e baixo o arquivo geoserver-2.8-SNAPSHOT-printing-plugin.zip. Todas as versões estão disponíveis em http://ares.boundlessgeo.com/geoserver/. Em seguida entre na pasta ext-latest.

Após o download da extensão de impressão é necessário descobrir qual o diretório em que ficam as bibliotecas do GeoServer.

Em nosso caso ela está no diretório C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoserver\WEB-INF\lib. Extraia o conteúdo do arquivo compactado para este diretório.

Após colocar os arquivos da extensão de impressão para este diretório é necessário que você reinicie o GeoServer.

Verificação da instalação

Veja como está a configuração da variável de ambiente GEOSERVER_DATA_DIR. Pode vir a ser necessária a correção do mesmo. O diretório por nós considerado é o C:\ProgramData\Boundless\OpenGeo\geoserver.

Verifique a existência do arquivo GEOSERVER_DATA_DIR/printing/config.yaml no diretório C:\Program Files (x86)\Boundless\OpenGeo\jetty\webapps\geoserver\data\printing. As configurações das formas de impressão podem ser realizadas através da edição deste arquivo.

Mais informações sobre estas configurações podem vir a ser encontradas no diretório Mapfish.

Se este módulo estiver configurado adequadamente, você pode acessar o link http://localhost:8080/geoserver/pdf/info.json, que retornará os parâmetros de impressão similar ao mostrado a seguir:

#!json
{"scales":[{"name":"1:1.000","value":"1000.0"},{"name":"1:2.000","value":"2000.0"},{"name":"1:4.000","value":"4000.0"},{"name":"1:8.000","value":"8000.0"},{"name":"1:16.000","value":"16000.0"},{"name":"1:32.000","value":"32000.0"},{"name":"1:64.000","value":"64000.0"},{"name":"1:128.000","value":"128000.0"},{"name":"1:256.000","value":"256000.0"},{"name":"1:512.000","value":"512000.0"},{"name":"1:1.024.000","value":"1024000.0"},{"name":"1:2.048.000","value":"2048000.0"},{"name":"1:4.096.000","value":"4096000.0"},{"name":"1:8.192.000","value":"8192000.0"},{"name":"1:16.384.000","value":"1.6384E7"},{"name":"1:32.768.000","value":"3.2768E7"},{"name":"1:65.536.000","value":"6.5536E7"},{"name":"1:131.072.000","value":"1.31072E8"},{"name":"1:262.144.000","value":"2.62144E8"},{"name":"1:524.288.000","value":"5.24288E8"}],"dpis":[{"name":"75","value":"75"},{"name":"150","value":"150"},{"name":"300","value":"300"}],"outputFormats":[{"name":"pdf"}],"layouts":[{"name":"A4","map":{"width":440,"height":600},"rotation":true},{"name":"Legal","map":{"width":440,"height":650},"rotation":true},{"name":"Letter","map":{"width":440,"height":550},"rotation":true}],"printURL":"http://localhost:8080/geoserver/pdf/print.pdf","createURL":"http://localhost:8080/geoserver/pdf/create.json"}

Exemplos de impressão

A seguir são mostrados exemplos de impressão.

impressao.JPG

impressao2.JPG

Referências

Informações sobre instalação da extensão de impressão

Post sobre correção da não conformidade de impressão

Configurações de impressão

Configuração YAML


Last edited by José Maria Villac Pinheiro