OpenLayers: compreendendo melhor as features – Control.SelectFeature –

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

Vamos construir um exemplo utilizando a classe OpenLayers.Control.SelectFeature. Vamos criar pontos, linhas e poligonos, colá-los no mapa, e usar o controle SelectFeature para permitir ao usuário selecionar a feature.

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,null);
        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]);
        /* -------------------------------------------------------------------------- */
        // Finalmente, 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();
    }
    </script>
</head>
<body onload='init();'>
    <div id='map_id' style='width: 800px; height: 400px;'></div>
</body>
</html>

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

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