Untitled

<!DOCTYPE html>
<html>
    <head>
        <title> WEBSIG</title>
        <script src="OpenLayers-2.9.1/lib/Firebug/firebug.js"></script>
        <script src="Ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
        <script src="Ext-3.2.1/ext-all.js"  type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="Ext-3.2.1/resources/css/ext-all.css" />
        <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
        <script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="GeoExt/resources/css/geoext-all-debug.css"/>
        <script src="DrawPoints.js" type="text/javascript"></script>
        <script src="proj4js-1.0.1/lib/proj4js.js" type="text/javascript"></script>
        <script type="text/javascript">


    </script>
    </head>
    <body>
        <div id="map-id"></div>
        <script type="text/javascript">


     // declara projecção usada
     var epsg_900913 = new OpenLayers.Projection("EPSG:900913");


        //função pgrouting
         function pgrouting(store, layer, method) {
         if (layer.features.length == 2) {

             // apagar rota anterior
             store.removeAll();

            //criar ponto de partida
            var startpoint = layer.features[0].geometry.clone();


             //criar ponto de destino
             var finalpoint = layer.features[1].geometry.clone();


             // carregar a rota
             store.load({
                 params: {
                     startpoint: startpoint.x + " " + startpoint.y,
                     finalpoint: finalpoint.x + " " + finalpoint.y,
                     method: method}  });


         }}


    //extend do mapa

    var extend = new OpenLayers.Bounds (-788843.31, 4977768.00,-785094.75, 4980008.00);


    //opções do mapa
    var opcoes = {maxExtent: extend,restrictExtent: extend, units: 'm',projection: epsg_900913,};


     Ext.onReady(function() {


        // criar o mapa

        var map = new OpenLayers.Map("map-id",opcoes);


       //criar mappanel
        var mapPanel = new GeoExt.MapPanel({
        renderTo: 'map-id',
        height: 560,
        width: 840,
        map: map

        });


       //criar e adicionar camadas base

        var aerial = new OpenLayers.Layer.Bing({
        key: "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf",
        type: "Aerial"
        });
        map.addLayer(aerial);

        var bing = new OpenLayers.Layer.Bing({
        key: "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf",
        type: "Road",
        });
        map.addLayer(bing);

        var osm = new OpenLayers.Layer.OSM();
        map.addLayer(osm);


        // var tree = new Ext.tree.TreePanel({
        // renderTo: "coluna",
            // root: new GeoExt.tree.LayerContainer({
            // text: 'Níveis de informação',
            // leaf: false,
            // expanded: true
            // }),
            // enableDD: true,
            // width: 230,
            // height: 560,
            // floating: true,
            // x: 841,
            // y: 0
            // });


       //criar e adicionar arcos
    var arcos = new OpenLayers.Layer.WMS(
        'Arcos',
       'http://localhost:8080/geoserver/base/wms',
        {layers: 'base:arcos',
        styles: 'line',
       srs: 'EPSG:900913',
       format: 'image/png',
       transparent: true},
    {isBaseLayer: false});
        map.addLayer(arcos);


        //criar e adicionar equipamentos
        //var equipamentos = new OpenLayers.Layer.WMS(
        //'Equipamentos',
        //'http://localhost:8080/geoserver/base/wms',
        //{layers: 'base:equipamentos',
        //styles: 'polygon',
        //srs: 'EPSG:900913',
        //format: 'image/png',
        //transparent: true
        //},{isBaseLayer: false});

        //map.addLayer(equipamentos);


       //criar layer que vai receber a rota
    var route_layer = new OpenLayers.Layer.Vector("rota", {
        projection: epsg_900913,
    styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
        strokeColor: "#ff9933",
        strokeWidth: 3

        }))})


        //layer que vai receber os rebaixamentos da rota

        var points_rota = new OpenLayers.Layer.Vector("rebaixamentos", {
        projection: epsg_900913,
    styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
        strokeColor: "#ff9933",
        strokeWidth: 3

        }))})


        // criar os pontos onde vão ser desenhados o início e fim do percurso
        var points_layer = new OpenLayers.Layer.Vector("points");


        // quando um ponto é adicionado chamar a função pgrouting
        points_layer.events.on({
            featureadded: function() {
                pgrouting(store, points_layer, method.getValue());
            }   });


        // adicionar os pontos e o percurso
        map.addLayers([points_layer, route_layer, points_rota]);


        // criar os controlos para desenhar os pontos de início e fim(DrawPoints.js)
        var draw_points = new DrawPoints(points_layer);


        // criar o controlo para mover os pontos
        var drag_points = new OpenLayers.Control.DragFeature(points_layer, {
            autoActivate: true
        });


        //criar controlo para mudar as camadas

        var mudar_camadas = new OpenLayers.Control.LayerSwitcher();

        //displayInLayerSwitcher: false;


        // Chamar a função pgrouting quando os pontos são movidos
        drag_points.onComplete = function() {
              pgrouting(store, points_layer, method.getValue());
        };


        // adicionar os controlos ao mapa
        map.addControls([draw_points, drag_points, mudar_camadas]);


        // create the store to query the web service
        var store = new GeoExt.data.FeatureStore({layer: route_layer, fields: [{name: "id"}],
            proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.HTTP({
            url: "./php/phpfile.php",
            format: new OpenLayers.Format.GeoJSON({
            internalProjection: epsg_900913,
            externalProjection: epsg_900913


                })})})});


             // create the store to query the web service - rebaixamentos
        var store2 = new GeoExt.data.FeatureStore({layer: points_rota, fields: [{name: "id"}],
            proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.HTTP({
            url: "./php/phpfile.php",
            format: new OpenLayers.Format.GeoJSON({
            internalProjection: epsg_900913,
            externalProjection: epsg_900913


                })})})});


        // zoom à bounding box
        map.zoomToExtent(extend);


        //definir a área máxima visível
        map.events.register('zoomend', map, function(){
        var mapProj = map.getProjection();
        var mapZoom = map.getZoom();
        var mapRes = map.getResolutionForZoom(mapZoom);
        if (mapProj == 'EPSG:900913' && mapRes > 4.777314267158508){
        map.zoomToExtent(extend);
        }
        });


    // create the method combo box
        var method = new Ext.form.ComboBox({
           renderTo: "method",
           triggerAction: "all",
           editable: false,
           forceSelection: true,
           store: [
               ["SP1", "Rod"],
            ["SP2", "Sén"],
        ["SP3", "Ad"]

         ],
         listeners: {
          select: function() {
           pgrouting(store, points_layer, method.getValue());
          }
         }
        });


        // método predefinido
        method.setValue("SP1");


    });


            </script>

            <div id="method"></div>
    </body>
</html>