Olá galera,
Conforme prometido, iremos criar um serviço WMS utilizando MapServer e PostGIS. Para visualizar nosso mapa, usaremos o Openlayers.
No post de hoje, vamos criar a estrutura inicial com alguns controles para exibir o nosso mapa. Abaixo segue a estrutura de pastas do nosso projeto.
Antes de começarmos a escrever código, faça o download do Openlayers. Atualmente, a última versão estável e a que vamos usar no nosso exemplo é a 2.12.
Após descompactar o arquivo baixado, copie o arquivo Openlayers.js que se encontra na raiz para a pasta js. Em seguida copie o arquivo style.css dentro de theme/default para a pasta css.
Faça, também, o download do arquivo e descompacte na pasta img do nosso projeto.
O arquivo index.html deve conter o código abaixo.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>CodeGeo - Desenvolvimento é diversão</title>
<link rel="stylesheet" type="text/css" href="css/project.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/OpenLayers.js" defer></script>
<script type="text/javascript" src="js/project.js" defer></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Obs:. Explicarei somente sobre algumas linhas de código do nosso projeto já que as demais são bem comuns para quem desenvolve para web. Ainda assim, caso alguma parte do código não fique clara, terei a maior satisfação em responder sua dúvida.
Na linha 9, carregando a api do Google Maps já que utilizaremos uma camada do Google.
Nas linhas 10 e 11, note que estou usando defer. Este atributo indica que o bloco de script só será carregado após todo o carregamento da página.
Crie o arquivo project.css dentro da pasta css do nosso projeto e adicione o código abaixo.
* {
margin: 0;
padding: 0;
}
body {
font: normal 11px arial, sans-serif;
text-align: justify;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
Na linha 1, limpando as margens e espaçamentos de todos os elementos.
Na linha 9, setando o nosso mapa para ocupar 100% da páginal.
Crie o arquivo project.js dentro da pasta js do nosso projeto e adicione o código abaixo.
OpenLayers.ImgPath='img/';
var map = new OpenLayers.Map({
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.LayerSwitcher()
],
div: "map",
projection: "EPSG:900913",
layers: [
new OpenLayers.Layer.OSM(null, null, {isBaseLayer: true}),
new OpenLayers.Layer.Google("Google Streets")
],
theme: 'css/style.css'
});
map.setCenter(
new OpenLayers.LonLat(-5112108.4510014, -1854056.5578272), 4
);
Na linha 1, alterando a pasta padrão de imagens do Openlayers.
Na linha 3, instanciando nosso mapa.
Na linha 4, adicionando alguns controles como zoom, posição do mouse, escala, navegação e layerswitcher.
Na linha 11, o id da div onde carregaremos o mapa.
Na linha 12, a projeção que estamos utilizando.
Na linha 13, as camadas que usaremos como base layer, no caso Google Maps e OpenStreetMap.
Na linha 17, alterando o caminho e qual o arquivo css padrão do Openlayers.
Na linha 20, setando o enquadramento inicial no Brasil.
Como resultado devemos ter um mapa como o abaixo:
No próximo post, vamos dar carga no banco de dados e criar um mapfile com o serviço WMS. Um abraço e até a próxima.
Nenhum comentário:
Postar um comentário