Modelação Geográfica, Cidades e Ordenamento do Território

Grupo integrado no e-GEO – Centro de Estudos de Geografia e Planeamento Regional

WebGIS: exemplo (alpha)

Leave a comment

Imagem

De forma a exemplificar a criação do esqueleto de um WebGIS, coloco de seguida o código que utiliza a livraria JavaScript Openlayers.

Para testar o código, basta seguir os seguintes passos (neste caso são utilizadas camadas do Google como base):

1. Num editor de texto, colar o código transcrito no final deste post.
2. gravar como egeo.html (o nome pode ser outro; a extensão tem que ser *.html).
3. na página http://www.openlayers.org, descarregar a última versão (“stable”) – clicando por exemplo em “zip”.
4. Descompactar o arquivo e colocar o ficheiro egeo.html dentro dessa pasta.
5. Clicar duas vezes no egeo.html e é tudo.

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <script type='text/javascript' src='OpenLayers.js'></script>
 <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type='text/javascript'>

var map;

 function init() {
 // Setup our map object
 map = new OpenLayers.Map('map_element', {});

// Add a Google Maps Layer
 var google_map_layer1 = new OpenLayers.Layer.Google(
 'Terrain',
 {type: google.maps.MapTypeId.TERRAIN}
 );

 // Add a 2 Google Maps Layer
 var google_map_layer2 = new OpenLayers.Layer.Google(
 'Road network',
 {type: google.maps.MapTypeId.ROADMAP}
 );

// Add a 3 Google Maps Layer
 var google_map_layer3 = new OpenLayers.Layer.Google(
 'Hybrid',
 {type: google.maps.MapTypeId.HYBRID}
 );

// Add the layers
 map.addLayers([google_map_layer2,google_map_layer3,google_map_layer1]);

// Add a layer switcher control
 map.addControl(new OpenLayers.Control.LayerSwitcher({}));

 // Zoom the map to the max extent
 map.setCenter(new OpenLayers.LonLat(-1019000,4684400));
 map.zoomTo(15);
 }

</script>
</head>

<body onload='init();'>
 <div id='map_element' style='width: 900px; height: 550px;'></div>
</body>
</html>

Deixe uma resposta

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s