Untitled

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
        <style type="text/css">
            #map {
                width: 800px;
                height: 450px;
                border: 1px solid black;
            }
        </style>


   <script src="http://openlayers.org/api/OpenLayers.js"></script>


        <script type="text/javascript">

            var SinglePoint = OpenLayers.Class.create();
            SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, {
                createFeature: function(evt) {
                    this.control.layer.removeFeatures(this.control.layer.features);
                    OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
                }
            });


//caracteristicas dos estilos para os pontos de partida e destino e respectivo percurso

            var start_style = OpenLayers.Util.applyDefaults({
                externalGraphic: "start.png",
                graphicWidth: 18,
                graphicHeight: 26,
                graphicYOffset: -26,
                graphicOpacity: 1
            }, OpenLayers.Feature.Vector.style['default']);

            var stop_style = OpenLayers.Util.applyDefaults({
                externalGraphic: "stop.png",
                graphicWidth: 18,
                graphicHeight: 26,
                graphicYOffset: -26,
                graphicOpacity: 1
            }, OpenLayers.Feature.Vector.style['default']);

             var result_style = OpenLayers.Util.applyDefaults({
                 strokeWidth: 3,
                 strokeColor: "#ff0000",
                 fillOpacity: 0
             }, OpenLayers.Feature.Vector.style['default']);


            // variáveis globais
            var map, parser, start, stop, downtown, result, controls;


                function Lon2Merc(lon) {

        return 20037508.34 * lon / 180;

}


function Lat2Merc(lat) {

        var PI = 3.14159265358979323846;

        lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);

        return 20037508.34 * lat / 180;

}

                   OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;

           OpenLayers.Util.onImageLoadErrorColor = "transparent";


         function init() {
        var zoom = 18;

                var options = {

                    projection: new OpenLayers.Projection("EPSG:900913"),

                    displayProjection: new OpenLayers.Projection("EPSG:4326"),

                    units: "m",

                    numZoomLevels: 22,

                    maxResolution: 156543.0339,
                    maxExtent: new OpenLayers.Bounds(-20037508, -20037508,

                                                     20037508, 20037508.34)


                };

                map = new OpenLayers.Map('map', options);
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.MousePosition());


    var wms_ruas = new OpenLayers.Layer.WMS(
           "ruas",
           "http://localhost:8080/geoserver/wms",
           {'layers': 'Vizela:ruas900913', 'format':'image/png',
'transparent':'true',strategies:[new OpenLayers.Strategy.Fixed()]},
           {'opacity': 1.0, 'isBaseLayer': false, 'visibility': false}

 );


    var wms_vertices = new OpenLayers.Layer.WMS(
           "vertices",
           "http://localhost:8080/geoserver/wms",
           {'layers': 'Vizela:vertices_tmp ', 'format':'image/png',
'transparent':'true',strategies:[new OpenLayers.Strategy.Fixed()]},
           {'opacity': 1.0, 'isBaseLayer': false, 'visibility': false}

 );


                        // layer do OSM

                var mapnik = new OpenLayers.Layer.TMS(

                    "OpenStreetMap (Mapnik)",

                      "http://a.tile.openstreetmap.org/",

                    {

                        type: 'png', getURL: osm_getTileURL,

                        displayOutsideMaxExtent: true,

                        attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>',

                    }

                );


            start = new OpenLayers.Layer.Vector("Ponto de partida", {style: start_style});
            stop = new OpenLayers.Layer.Vector("Ponto de destino", {style: stop_style});

            result = new OpenLayers.Layer.Vector("Percurso", {style: result_style});

                map.addLayers([wms_vertices, wms_ruas,mapnik, start, stop,result]);


                // Definir a posição inicial (neste caso do munícipio)
                map.zoomToExtent(new OpenLayers.Bounds(-929102.37877511,
                                                       5066053.4452291,
                                                       -921458.67594797,
                                                        5070353.0280693));


                // controlos
                controls = {
                  start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
                  stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
                }
                for (var key in controls) {
                    map.addControl(controls[key]);
                }
            }

            function toggleControl(element) {
                for (key in controls) {
                    if (element.value == key && element.checked) {
                        controls[key].activate();
                    } else {
                        controls[key].deactivate();
                    }
                }
            }

            function compute() {
                var startPoint = start.features[0];
                var stopPoint = stop.features[0];


                if (startPoint && stopPoint) {


                     OpenLayers.loadURL("routing.php?startpoint="+startPoint.geometry.x+" "+startPoint.geometry.y+"&finalpoint="+stopPoint.geometry.x+" "+stopPoint.geometry.y+"&method=SPD&srid=900913",
                                       null,
                                       null,
                                       displayRoute,
                                       null);

                }
            }


            function displayRoute(response) {
                if (response && response.responseXML) {


// apagar resultados anteriores


                    result.removeFeatures(result.features);


function parseWKT(wkt) {


           parser = new OpenLayers.Format.WKT();

               var geometry = parser.read(wkt)


                var features = parser.read(wkt);
                var bounds;
                if(features) {

                    if(features.constructor != Array) {
                        features = [features];
                    }
                    for(var i=0; i<features.length; ++i) {
                        if (!bounds) {
                            bounds = features[i].geometry.getBounds();
                        } else {
                            bounds.extend(features[i].geometry.getBounds());
                        }

                    }
        console.log(features)
                 result.addFeatures(features);

                } else {
                alert ("wrong");
                    element.value = 'Bad WKT';
                }
            }


//passar as novas features


                    var edges = response.responseXML.getElementsByTagName('edge');


                    var features = [];
                    for (var i = 0; i < edges.length; i++) {
                        var g = parseWKT(edges[i].getElementsByTagName('wkt')[0].textContent);
                        features.push(new OpenLayers.Feature.Vector(g));
                    }
                    result.addFeatures(features);
                }


            }


           function osm_getTileURL(bounds) {

                var res = this.map.getResolution();

                var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));

                var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));

                var z = this.map.getZoom();

                var limit = Math.pow(2, z);


                if (y < 0 || y >= limit) {

                    return OpenLayers.Util.getImagesLocation() + "404.png";

                } else {

                    x = ((x % limit) + limit) % limit;

                    return this.url + z + "/" + x + "/" + y + "." + this.type;

                }

            }

        </script>
  </head>
  <body onload="init()">
        <div id="map"></div>

        <ul>
          <li>
            <input type="radio" name="control" id="noneToggle"
                   onclick="toggleControl(this);" checked="checked" />
            <label for="noneToggle">Navegar</label>
          </li>
          <li>
            <input type="radio" name="control" value="start" id="startToggle"
                   onclick="toggleControl(this);" />
            <label for="startToggle">Definir ponto de partida</label>
          </li>
          <li>
            <input type="radio" name="control" value="stop" id="stopToggle"
                   onclick="toggleControl(this);" />
            <label for="stopToggle">Definir ponto de destino</label>
          </li>
        </ul>

        <select id="method">
          <option value="SPD">Shortest Path Dijkstra - undirected (BBox)</option>

        </select>
        <button onclick="compute()">Calcular percurso</button>


  </body>
</html>