OpenLayers: compreendendo melhor as features – controle GetFeature – WFS

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

Nesta receita pretende-se demostrar como usar o controle GetFeature, utilizando Protocol.WFS, para selecionar features de um layer WMS.

A classe OpenLayers.Control.GetFeature realiza busca por features para a localização sobre o cursor do mouse. Pode ser configurado para agir com o click, hover ou caixas de arrasto. Usa a classe OpenLayers.Protocol (HTTP ou WFS), a qual suporta filtros espaciais para adquirir features do servidor e disparar eventos que notificam aplicações associadas a feature selecionada.


<!DOCTYPE html> 
<html lang='pt'> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Indicação da localização da bilbioteca OpenLayers -->
    <script type='text/javascript' src='./js/OpenLayers-2.12/OpenLayers.js'></script>
    <title>WFS: exemplo GetFeature (GeoServer)</title>
    <script type='text/javascript'>
    //    var map, layer, select, hover, control;
    var map, layer, select, control;
    const HOSTNAME = "HTTP://endereco_servidor:8080/geoserver/wfs";
    //
    function init() {
        map = new OpenLayers.Map('map', {
            controls: [
                new OpenLayers.Control.PanZoom(),
                new OpenLayers.Control.MousePosition({}),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Navigation()
            ]
        });
    //WMS Layer: Ride-DF
    layer = new OpenLayers.Layer.WMS(
        'DF:Ride',
        HOSTNAME,
        {layers: 'cdes:ride_df', transparent:true},{attribution:'RIDE-DF',visibility: true, 
          isBaseLayer:true,opacity:.5,displayInLayerSwitcher:true}
    );
    //
    select = new OpenLayers.Layer.Vector("Selection", {styleMap: 
            new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
    });
/*  Se desejar adicionar a facilidade hover, descomentar estas duas instruções e
    adicionar o layer hover ao mapa.
    Neste exemplo iremos deixar a opção "hover" desabilitada.
    Observer que o "hover" habilitado provoca um adicional de pedidos GetFeature 
    para ser emitido ao servidor de mapas.
    hover = new OpenLayers.Layer.Vector("Hover");
    map.addLayers([layer, hover, select]);
*/
    map.addLayers([layer, select]);
    control = new OpenLayers.Control.GetFeature({
        protocol: OpenLayers.Protocol.WFS.fromWMSLayer(layer),
        box: true,  // permite selecao de feature desenhando uma caixa
        hover: false,  // Se true, envia um pedido de feature quando mouse over.
        multipleKey: "shiftKey",
        toggleKey: "ctrlKey"
    });
    control.events.register("featureselected", this, function(e) {
        select.addFeatures([e.feature]);
    });
    control.events.register("featureunselected", this, function(e) {
        select.removeFeatures([e.feature]);
    });
/*
    Só necessário de facilidade hover habilitada
    control.events.register("hoverfeature", this, function(e) {
        hover.addFeatures([e.feature]);
    });
    control.events.register("outfeature", this, function(e) {
        hover.removeFeatures([e.feature]);
    });
*/
    map.addControl(control);
    control.activate();
    //
    map.setCenter(new OpenLayers.LonLat(-47.85,-15.80),8);
    }
    </script>
  </head>
  <body onload="init()">
<h1 id="title">WFS: exemplo de GetFeature (GeoServer)</h1>
<p id="shortdesc">
    Demostra como usar o controle GetFeature para selecionar features de um layer WMS.
</p>
<div id="map" style='width: 800px; height: 400px;'></div>
<div id="docs">
    <p>
        "Click" ou "drag" uma caixa para selecionar features, use a tecla "Shift" para adicionar
        features a seleção, use a tecla "Ctrl" para chavear o status da feature.
    </p>
</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