GeoSanWebOpenlayers Page History

Definição do objeto mapa

Para ativar o mapa com o OpenLayers é necessária a definição do objeto map como a seguir:

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

Ver abaixo a variável mercator.

A definição do objeto mapa não garante a apresentação do mesmo. É necessária a chamada dos mapas que serão visualizados.

Chamada do mapa

Para a chamada de um novo plano de informação (camada) criamos duas variáveis:

images - possui todas as camadas adicionadas e que serão mostradas no mapa

image - possui a camada configurada que será adicionada a images

Desta forma para adicionar inicialmente o mapa do OpenStreetMaps, temos:

var images = [];
var image;

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

Exemplo básico para apresentação do mapa

A seguir um exemplo em que o mapa é apresentado:

<html>
    <head>
        <title>DAE SCS</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);  

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

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

exemplo1

Chamada das redes de água

Para chamar os trechos das redes de água adicionamos uma chamada WMS.

image =  new OpenLayers.Layer.WMS(
    "Redes de água", "http://localhost:8080/geoserver/espacodae/wms",
    {
        layers: 'mapasAgua:redesAgua',
        STYLES: 'redeAgua',
        format: 'image/jpeg',
        transparent: "true"
    },
    {
       visibility:true,
       displayInLayerSwitcher:false,
    } 
);
images.push(image);

Desta forma o código em que são apresentados os mapas do OpenStreetMaps e as redes de água, fica da seguinte forma:

<html>
    <head>
        <title>DAE SCS</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:8080/geoserver/espacodae/wms",
                {
                    layers: 'mapasAgua:redesAgua',
                    STYLES: 'redeAgua',
                    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, 13);
        </script>
    </body>
</html>

O qual apresenta o seguinte mapa:

exemplo2

Projeções cartográficas

O primeiro passo é ficar bem claro que projeções cartográficas estão sendo utilizadas. A não atenção a isto pode inviabilizar a visualização dos mapas.

Para auxiliar junto a estas projeções, vamos definir duas variáveis no javascript da página html que irá mostrar o mapa. Selecione aqui para consultar as projeções cartográficas.

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

onde:

mercator representa uma sistema de projeção coordenadas esférica Mercator utilizada popularmente por serviços web do Google e OpenStreetMaps.

wgs representa World Geodetic System, um padrão para uso em cartografia, geodésica e GPS. Foi estabelecida no ano de 1984 e revisada em 2004. Mais informações selecione aqui.

Chamada OpenStreetMaps pelo OpenLayers

Desta forma ao chamar o mapa do OpenStreetMaps pelo OpenLayers, especificamos a projeção cartográfica através desta variável definida.

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

Conversão de coordenadas

Para converter uma coordenada de uma projeção cartográfica para outra, pode-se utilizar a classe OpenLayers.LonLat. Nela existe o método transform que converte a latitude e longitude para uma outra projeção cartográfica. A seguir um exemplo desta transformação: 

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

map.setCenter(centro, 13);

Como nosso map está em EPSG:3857 (mercator) e possuímos as coordenadas apenas em latitude e longitude em EPSG:4326 (WGS84), convertemos para que o zoom inicial do mapa esteja na posição correta.

Acesso a um layer via WMS

A seguir é mostrado como acessar um layer disponibilizado via um serviço WMS do GeoServer com o método ol.source.TileWMS.

Note que pode-se escolher o estilo em que o mesmo irá ser mostrado. Você pode definir o estilo no GeoServer e chamá-lo através do parâmetro STYLES conforme a seguir:

params: {LAYERS: 'mapasBasico:lotes', TILED: true, STYLES: 'lotes'}

Para disponibilizar o mapa para qualquer dispositivo móvel ou no navegador de seu computador coloque o seguinte arquivo HTML no diretório C:\Desenv\geosanweb. Em nosso caso é o diretório do servidor de páginas Web.

Para acessar o mapa basta navegar na página http://127.0.0.1:8081/daescsCelular.html.

lotes

<!doctype html>
<html>
    <header><title>DAESCS - GeoSan Celular</title></header>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
            <style>
                .map {
                height: 100%;
                width: 100%;
                }
            </style>
            <script src="https://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"></script>
            <title>DAESCS</title>
        </head>
    <body>
        <div style="width:100%; height:100%" id="map"></div>
        <script defer="defer" type="text/javascript"></script>
        <script>
            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        title: 'DAESCS',
                        source: new ol.source.TileWMS({
                            url: 'http://localhost:8080/geoserver/espacodae/wms',
                            params: {LAYERS: 'mapasBasico:lotes', TILED: true, STYLES: 'lotes'}
                        })
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([-46.6000134,-23.6248019]),
                    zoom: 13
                })
            });
        </script>
    </body>
</html>

Referências

ol.source.TileWMS!

Tutorial OpenLayers

Last edited by José Maria Villac Pinheiro