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:
Clique em "Iniciar" pesquise por “Opções da Internet” (sem aspas);
Selecione "Opções da Internet";
Escolha a guia "Avançadas";
Na parte inferior da janela há a opção "Redefinir...";
Marque a opção "Excluir configurações pessoais" e clique em "Redefinir". Em seguida clique em "Fechar";
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:
Verificar XLM Mapa
#!html
http://localhost:8080/geoserver/ows?service=WFS&request=DescribeFeatureType&version=1.0.0&;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
Vídeo sobre criação e deploy de uma aplicação com OpenGeo
Operações OGC com inserção e seleção de features
Encontrar features dentro de um polígono
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.
Referências
Informações sobre instalação da extensão de impressão
Post sobre correção da não conformidade de impressão
NodeJS
Nodemon
Pode acontecer de o nodemon não funcionar devido a sempre indicar que a porta está ocupada.
Para isso para matar o processo rode:
sudo kill -9 `sudo lsof -t -i:3000`
onde 3000 é o número da porta do servidor.
Para listar se existe processo nesta porta rode:
lsof -i :3000
Para matar um processo que possa estar rodando o nodejs como processo no servidor rode:
pkill -f node