OpenLayers: um exemplo utilizando diferentes projeções

Publicado: 04/08/2012 em Programação, Serviços IP
Tags:, ,

Neste exemplo é mostrado uma camada de informações servida pelo servidor de mapas Geoserver em projeção ESPG:4326, camadas do Google que estão em ESPG:900913 e uma camada oriunda do OpenStreet que também está em ESPG:900913.

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>
var map;
//
function init() {
//
//Criar o "objeto" mapa
map = new OpenLayers.Map('map_element',{
maxExtent: new OpenLayers.Bounds(
-128 * 156543.0339,
-128 * 156543.0339,
128 * 156543.0339,
128 * 156543.0339),
maxResolution: 156543.0339,
units: 'm',
projection: new OpenLayers.Projection('EPSG:900913'),
//                displayProjection: new OpenLayers.Projection("EPSG:4326"),
});
//OpenStreetMap
var map_osm = new OpenLayers.Layer.OSM(
'OpenStreetMap Layer'
);
//Google streets is the normal map type, so we don't need to pass in a type
var google_streets = new OpenLayers.Layer.Google(
"Google Streets",
{numZoomLevels: 20}
);
//Camada do "tipo" Google satellite
var google_satellite = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE},
{numZoomLevels: 20}
);
//WMS Layer - Meu layer criado e servido pelo Geoserver
var wms_layer = new OpenLayers.Layer.WMS(
'WMS Meu Layer específico',
'http://192.168.0.108:8080/geoserver/wms/',
{layers: 'minha_base:minha_camada', transparent: true},{isBaseLayer:false,opacity:.5}
);
//
//Criar Layer Vetorial
var vector_layer = new OpenLayers.Layer.Vector(
'Editable Vectors');
//Adicionar um controle (menu) para edição vetorial
map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));
//
//Adicionar os layers criados ao mapa
map.addLayers([map_osm, google_streets, google_satellite,wms_layer, vector_layer]);
//
//Adicionar um controle para visualizar a posição do mouse
map.addControl(new OpenLayers.Control.MousePosition());
//
// Adicionar um layer de "switcher control"
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
//
// Deixar o centro do mapa no Distrito Federal
map.setCenter(new OpenLayers.LonLat(-5330000,-1780000),10);
//
// Zoom the map to the max extent
if(!map.getCenter()){
map.zoomToMaxExtent();
}
}
//
</script>
</head>
<body onload='init();'>
<div id='map_element' style='width: 1200px; height: 500px;'></div>
</body>
</html>

Anúncios

Deixe um comentário, pois isto é muito motivante para continuarmos este trabalho

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s