OpenLayers: compreendendo melhor as features – Control.SelectFeature e eventos

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

Vamos construir um exemplo mostrando como selecionar uma feature e tratar eventos do click do mouse para mostrar os atributos da feature. Utilizaremos de “Control.SelectFeature” e . Vamos criar pontos, linhas e poligonos, colá-los no mapa, e usar o controle SelectFeature e tratadores de eventos para permitir ao usuário selecionar a feature e visualizar seus atributos.

Executando o script, basta clicar em cada feature para selecioná-la individualmente, ou <shift>+click para selecionar um grupo de features.


<!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;
    function init() {
    //
    //Criar o objeto mapa
    map = new OpenLayers.Map('map_id');
    //
    //Criar l 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({title: 'Menu de layers disponíveis'}));
    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();
    }
    //
    // Criar um layer vetorial para sobrepor o layer raster e adicioná-lo ao mapa
    var layer_vetorial = new OpenLayers.Layer.Vector('Layer Testes Geometria');
    map.addLayer(layer_vetorial);
    //
    /* -------------------------------------------------------------------------- */
    // Vamos trabalhar um pouco criando geometrias, depois
    // criar as features e adicioná-las ao layer vetorial. Usaremos:
    // Geometry.Point, Geometry.LineString, Geometry.LinearRing e Geometry.Polygon
    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);
    var feature_point2 = new OpenLayers.Feature.Vector(geom_point2,
                         {'localizacao':'lago Paranoá','descricao':'muita água, muito bonito!'});
    var feature_point3 = new OpenLayers.Feature.Vector(geom_point3);
    var feature_line1  = new OpenLayers.Feature.Vector(geom_line1,
                         {'localizacao':'linha norte-sul','descricao':'principal linha de onibus do centro de Brasilia.'});
    var feature_line2  = new OpenLayers.Feature.Vector(geom_line2,
                         {'localizacao':'bairro central de Brasilia-DF','descricao':'linha integração gratuita.'});
    //
    var feature_polygon = new OpenLayers.Feature.Vector(
        //Construir um polígono de "linear ring objects", os quais são pontos
        new OpenLayers.Geometry.Polygon(new OpenLayers.Geometry.LinearRing(
                [
                    new OpenLayers.Geometry.Point(-47.982,-15.734),
                    new OpenLayers.Geometry.Point(-47.913,-15.737),
                    new OpenLayers.Geometry.Point(-47.910,-15.795),
                    new OpenLayers.Geometry.Point(-47.976,-15.799)
                    //Não há necessidade de fechar o último ponto, ele será fechado automaticamente
                ]
        )),
        {'localizacao': 'Parque da Cidade', 'descricao': 'Excelente para lazer'}
    );
    //
    var feature_linestring = new OpenLayers.Feature.Vector(
            //Construir LinearRing
            new OpenLayers.Geometry.LinearRing(
               [
                   // Não há necessidade de especificar o último ponto.
                   // O próprio OpneLayers fecha o anel.
                   new OpenLayers.Geometry.Point(-47.886,-15.721),
                   new OpenLayers.Geometry.Point(-47.841,-15.625),
                   new OpenLayers.Geometry.Point(-47.811,-15.727)
               ]
            ),
            {'localizacao': 'Parque da Nacente de Água', 'descricao': 'um museu a céu aberto da natureza.'}
     );
    //
    layer_vetorial.addFeatures([feature_point1,feature_point2,feature_point3,
                              feature_line1,feature_line2,feature_polygon,feature_linestring]);
    /* -------------------------------------------------------------------------- */
    // Criar e adicionar o controle "selectFeature control"
    // e adicioná-lo ao mapa
    var select_feature_control = new OpenLayers.Control.SelectFeature(
                layer_vetorial, 
                {
                        multiple: false,
                        toggle: true,
                        toggleKey: 'ctrlKey',
                        multipleKey: 'shiftKey' 
                }
    );
    map.addControl(select_feature_control); 
    //Ativar o controle
    select_feature_control.activate();
    //
    // Finalmente, adicionar tratadores de eventos do mouse do usuário
    //que interage com as features
    function selected_feature(event){
            // limpar o conteúdo de log's
            document.getElementById('map_feature_log').innerHTML = '';
            //
            // Mostrar a feature corrente selecionada (passada pelo objeto evento)
            var mostrar_texto = 'Mouse clicou em: ' 
            + '<strong>' + event.feature.attributes.localizacao + '</strong>'
            + ': ' + event.feature.attributes.descricao + '<hr />';
           document.getElementById('map_feature_log').innerHTML = mostrar_texto;
           //
           //mostrar todas as features selecionadas
           document.getElementById('map_feature_log').innerHTML += 'Todas as features seleciondas: ';
          //
          //loop através do array de features selecionadas
          for(var i=0; i < layer_vetorial.selectedFeatures.length; i++){
            document.getElementById('map_feature_log').innerHTML += 
                layer_vetorial.selectedFeatures[i].attributes.localizacao + ' | ';
          }
    }
    //
    function unselected_feature(event){
          var mostrar_texto = event.feature.attributes.localizacao + ' não selecionado!' + '<hr />';
          document.getElementById('map_feature_log').innerHTML = mostrar_texto;
          //
          // Mostrar todas features selecionadas
          document.getElementById('map_feature_log').innerHTML += 'Todas as features seleciondas: ';
          //
          // Loop através do array de features selecionadas
          for(var i=0; i < layer_vetorial.selectedFeatures.length; i++){
            document.getElementById('map_feature_log').innerHTML += 
               layer_vetorial.selectedFeatures[i].attributes.localizacao + ' | ';
          }
    }
    //
    // Register o evento
    layer_vetorial.events.register('featureselected', this, selected_feature);
    layer_vetorial.events.register('featureunselected', this, unselected_feature);
    }
    </script>
</head>
<body onload='init();'>
    <div id='map_id' style='width: 800px; height: 400px;'></div>
    <div id='map_feature_log'></div>
</body>
</html>

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

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