OpenLayers: compreendendo melhor as features – Feature.Vector –

Publicado: 04/07/2013 em Programação, Serviços IP
Tags:, , ,

1. Visão Geral
Sugerimos inicialmente a leitura do post OpenLayers: objeto Feature. Que bicho é este? que apresenta o conceito de feature. Isto facilitará o entendimento do exemplo disponibilizado a seguir.

2. Um exemplo funcionando


<!DOCTYPE html> 
<html lang='pt'> 
<head> 
  <meta charset='utf-8' />
  <!-- Indicação da localização da bilbioteca OpenLayers -->
  <script type='text/javascript' src='./js/OpenLayers-2.12/OpenLayers.js'></script>
  <script type='text/javascript'>
  var map;
    var map;    
    function init() {
        // Criar o Objeto mapa
	//
        map = new OpenLayers.Map('map_id');
        // Criar o Layer básico raster e adicioná-lo ao mapa
        // Este mapa trabalha com a projeção geográfica (EPSG:4326)
        // que será utilizada diretamente ao longo deste exemplo
    	var wms_layer = new OpenLayers.Layer.WMS(
                'OpenLayers WMS',
                'http://vmap0.tiles.osgeo.org/wms/vmap0',
                {layers: 'basic'},
                {}
        );
        map.addLayer(wms_layer);
	//
        // Adicionar dois controles ao mapa para auxiliar na visualização da localização
        map.addControl(new OpenLayers.Control.LayerSwitcher());
	map.addControl(new OpenLayers.Control.MousePosition({}));
	//
	// Fixar o centro do mapa no Distrito Federal, onde está a capital do Brasil
	// utilizaremos um nível de zoom=11 que dará uma boa aproximação para os propósitos deste exemplo
	map.setCenter(new OpenLayers.LonLat(-47.85,-15.80),11);
	if(!map.getCenter()){
	    map.zoomToMaxExtent();
	}
	// Definir um novo estilo default para as features
	// Não seria obrigatório, apenas um plus a mais.
	var vector_style =  new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
	    pointRadius:22,
	    strokeColor:'red',
	    fillOpacity:0.0,
	    strokeOpacity:1,
	    strokeWidth: 2,
	    fillOpacity:0.1},
	    OpenLayers.Feature.Vector.style["default"]));
	// Criar um layer vetorial para sobrepor o layer raster e adicioná-lo ao mapa
	var layer_vetorial = new OpenLayers.Layer.Vector('Layer Dados Locais');
	layer_vetorial.styleMap = vector_style;  // Necessário se utilizou o vector_style anteriormente
	map.addLayer(layer_vetorial);
	//
	// Criar as features e adicioná-las ao layer vetorial
	var geom_point1 = new OpenLayers.Geometry.Point(-47.86,-15.83);
	var geom_point2 = new OpenLayers.Geometry.Point(-47.886,-15.741);
	var geom_point3 = new OpenLayers.Geometry.Point(-47.811,-15.748);
	var geom_line1  = new OpenLayers.Geometry.LineString(
                          [geom_point1,geom_point2]);
	var geom_line2  = new OpenLayers.Geometry.LineString(
                          [geom_point2,geom_point3]);
	//
	var feature_point1 = new OpenLayers.Feature.Vector(geom_point1,
	                     null,
	                     {
	                     pointRadius:12,
	                     fillOpacity:0.7,
	                     fillColor:"#E31818",
	                     strokeColor:"#18E385",
	                     strokeWidth:8
	                     }
	);
	var feature_point2 = new OpenLayers.Feature.Vector(geom_point2,
                             {title:"Feature-2"});
	var feature_point3 = new OpenLayers.Feature.Vector(geom_point3);
	var feature_line1  = new OpenLayers.Feature.Vector(geom_line1,
	                     null,
	                     {
	                     strokeColor:"#176B44",
	                     strokeWidth:3
	                     }
	);
	var feature_line2  = new OpenLayers.Feature.Vector(geom_line2);
	map.layers[1].addFeatures([feature_point1,feature_point2,feature_point3,
                                   feature_line1,feature_line2]);
	//
/*	Uma outra forma seria substituir esta última instrução acima pelas duas instruções a seguir:
	layer_vetorial.addFeatures([feature_point1,feature_point2,feature_point3,
                                   feature_line1,feature_line2]);
	map.addLayer(layer_vetorial);
*/
        //
	// Calcular a distância em Km entre os pontos 1 e 2
	var dist = geom_point1.distanceTo(geom_point2);
	// Enviar o resultado do cálculo para o console do Firebug
	console.log("distancia(1-2)=",60 * 1.8520 * dist ,"Km");
	// Clonar o ponto 1
	var geom_point4 = geom_point1.clone();
	// Calcular a distância em Km entre os pontos 3 e 4
	// OBS: para este cálculo não há necessidade de criar a feature e adicioná-la ao mapa
	var dist = geom_point3.distanceTo(geom_point4);
	// Enviar o resultado do cálculo para o console do Firebug
	console.log("distancia(3-4)=",60 * 1.8520 * dist ,"Km");
        }
    </script>
</head>
<body onload='init();'>
    <div id='map_id' style='width: 600px; height: 400px;'></div>
</body>
</html>

Referências:
1- OpenLayers: API Documentation
2- OpenLayers Library Documentation
Veja Também:
3- Um pouco de OpenLayers, Geoserver e PostGis

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