Advertisement
Guest User

Untitled

a guest
Dec 14th, 2011
92
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.65 KB | None | 0 0
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.   <head>
  3.         <style type="text/css">
  4.             #map {
  5.                 width: 800px;
  6.                 height: 450px;
  7.                 border: 1px solid black;
  8.             }
  9.         </style>
  10.  
  11.  
  12.  
  13.    <script src="http://openlayers.org/api/OpenLayers.js"></script>
  14.  
  15.  
  16.         <script type="text/javascript">
  17.  
  18.             var SinglePoint = OpenLayers.Class.create();
  19.             SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, {
  20.                 createFeature: function(evt) {
  21.                     this.control.layer.removeFeatures(this.control.layer.features);
  22.                     OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
  23.                 }
  24.             });
  25.  
  26.  
  27. //caracteristicas dos estilos para os pontos de partida e destino e respectivo percurso
  28.  
  29.             var start_style = OpenLayers.Util.applyDefaults({
  30.                 externalGraphic: "start.png",
  31.                 graphicWidth: 18,
  32.                 graphicHeight: 26,
  33.                 graphicYOffset: -26,
  34.                 graphicOpacity: 1
  35.             }, OpenLayers.Feature.Vector.style['default']);
  36.  
  37.             var stop_style = OpenLayers.Util.applyDefaults({
  38.                 externalGraphic: "stop.png",
  39.                 graphicWidth: 18,
  40.                 graphicHeight: 26,
  41.                 graphicYOffset: -26,
  42.                 graphicOpacity: 1
  43.             }, OpenLayers.Feature.Vector.style['default']);
  44.  
  45.              var result_style = OpenLayers.Util.applyDefaults({
  46.                  strokeWidth: 3,
  47.                  strokeColor: "#ff0000",
  48.                  fillOpacity: 0
  49.              }, OpenLayers.Feature.Vector.style['default']);
  50.  
  51.  
  52.  
  53.  
  54.             // variáveis globais
  55.             var map, parser, start, stop, downtown, result, controls;
  56.  
  57.  
  58.                 function Lon2Merc(lon) {
  59.  
  60.         return 20037508.34 * lon / 180;
  61.  
  62. }
  63.  
  64.  
  65.  
  66. function Lat2Merc(lat) {
  67.  
  68.         var PI = 3.14159265358979323846;
  69.  
  70.         lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
  71.  
  72.         return 20037508.34 * lat / 180;
  73.  
  74. }
  75.  
  76.                    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
  77.  
  78.            OpenLayers.Util.onImageLoadErrorColor = "transparent";
  79.  
  80.  
  81.  
  82.  
  83.  
  84.          function init() {
  85.         var zoom = 18;
  86.  
  87.                 var options = {
  88.  
  89.                     projection: new OpenLayers.Projection("EPSG:900913"),
  90.  
  91.                     displayProjection: new OpenLayers.Projection("EPSG:4326"),
  92.  
  93.                     units: "m",
  94.  
  95.                     numZoomLevels: 22,
  96.  
  97.                     maxResolution: 156543.0339,
  98.                     maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
  99.  
  100.                                                      20037508, 20037508.34)
  101.            
  102.  
  103.  
  104.          
  105.        
  106.  
  107.                 };
  108.  
  109.                 map = new OpenLayers.Map('map', options);
  110.                 map.addControl(new OpenLayers.Control.LayerSwitcher());
  111.                 map.addControl(new OpenLayers.Control.MousePosition());
  112.  
  113.  
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.     var wms_ruas = new OpenLayers.Layer.WMS(
  129.            "ruas",
  130.            "http://localhost:8080/geoserver/wms",
  131.            {'layers': 'Vizela:ruas900913', 'format':'image/png',
  132. 'transparent':'true',strategies:[new OpenLayers.Strategy.Fixed()]},
  133.            {'opacity': 1.0, 'isBaseLayer': false, 'visibility': false}
  134.  
  135.  );
  136.  
  137.  
  138.  
  139.     var wms_vertices = new OpenLayers.Layer.WMS(
  140.            "vertices",
  141.            "http://localhost:8080/geoserver/wms",
  142.            {'layers': 'Vizela:vertices_tmp ', 'format':'image/png',
  143. 'transparent':'true',strategies:[new OpenLayers.Strategy.Fixed()]},
  144.            {'opacity': 1.0, 'isBaseLayer': false, 'visibility': false}
  145.  
  146.  );
  147.  
  148.  
  149.  
  150.  
  151.  
  152.  
  153.                         // layer do OSM
  154.  
  155.                 var mapnik = new OpenLayers.Layer.TMS(
  156.  
  157.                     "OpenStreetMap (Mapnik)",
  158.  
  159.                       "http://a.tile.openstreetmap.org/",
  160.  
  161.                     {
  162.  
  163.                         type: 'png', getURL: osm_getTileURL,
  164.  
  165.                         displayOutsideMaxExtent: true,
  166.  
  167.                         attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>',
  168.  
  169.                     }
  170.  
  171.                 );
  172.  
  173.  
  174.  
  175.             start = new OpenLayers.Layer.Vector("Ponto de partida", {style: start_style});
  176.             stop = new OpenLayers.Layer.Vector("Ponto de destino", {style: stop_style});
  177.  
  178.             result = new OpenLayers.Layer.Vector("Percurso", {style: result_style});
  179.  
  180.                 map.addLayers([wms_vertices, wms_ruas,mapnik, start, stop,result]);
  181.  
  182.  
  183.        
  184.  
  185.  
  186.  
  187.  
  188.  
  189.  
  190.  
  191.  
  192.  
  193.  
  194.  
  195.                 // Definir a posição inicial (neste caso do munícipio)
  196.                 map.zoomToExtent(new OpenLayers.Bounds(-929102.37877511,
  197.                                                        5066053.4452291,
  198.                                                        -921458.67594797,
  199.                                                         5070353.0280693));
  200.  
  201.  
  202.  
  203.  
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210.  
  211.                 // controlos
  212.                 controls = {
  213.                   start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
  214.                   stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
  215.                 }
  216.                 for (var key in controls) {
  217.                     map.addControl(controls[key]);
  218.                 }
  219.             }
  220.  
  221.             function toggleControl(element) {
  222.                 for (key in controls) {
  223.                     if (element.value == key && element.checked) {
  224.                        controls[key].activate();
  225.                     } else {
  226.                         controls[key].deactivate();
  227.                     }
  228.                 }
  229.             }
  230.  
  231.             function compute() {
  232.                 var startPoint = start.features[0];
  233.                 var stopPoint = stop.features[0];
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240.                 if (startPoint && stopPoint) {
  241.  
  242.  
  243.  
  244.  
  245.  
  246.  
  247.                     OpenLayers.loadURL("routing.php?startpoint="+startPoint.geometry.x+" "+startPoint.geometry.y+"&finalpoint="+stopPoint.geometry.x+" "+stopPoint.geometry.y+"&method=SPD&srid=900913",
  248.                                       null,
  249.                                       null,
  250.                                       displayRoute,
  251.                                       null);
  252.  
  253.                 }
  254.             }
  255.  
  256.  
  257.  
  258.  
  259.             function displayRoute(response) {
  260.                 if (response && response.responseXML) {
  261.  
  262.  
  263.  
  264.  
  265.  
  266.  
  267.  
  268. // apagar resultados anteriores
  269.  
  270.  
  271.                    result.removeFeatures(result.features);
  272.  
  273.  
  274.  
  275. function parseWKT(wkt) {
  276.  
  277.  
  278.            parser = new OpenLayers.Format.WKT();
  279.  
  280.                var geometry = parser.read(wkt)
  281.  
  282.  
  283.                 var features = parser.read(wkt);
  284.                 var bounds;
  285.                 if(features) {
  286.  
  287.                     if(features.constructor != Array) {
  288.                         features = [features];
  289.                     }
  290.                     for(var i=0; i<features.length; ++i) {
  291.                        if (!bounds) {
  292.                            bounds = features[i].geometry.getBounds();
  293.                        } else {
  294.                            bounds.extend(features[i].geometry.getBounds());
  295.                        }
  296.  
  297.                    }
  298.         console.log(features)
  299.                 result.addFeatures(features);
  300.  
  301.                } else {
  302.                alert ("wrong");
  303.                    element.value = 'Bad WKT';
  304.                }
  305.            }
  306.  
  307.  
  308. //passar as novas features
  309.  
  310.  
  311.                    var edges = response.responseXML.getElementsByTagName('edge');
  312.  
  313.  
  314.                    var features = [];
  315.                    for (var i = 0; i < edges.length; i++) {
  316.                        var g = parseWKT(edges[i].getElementsByTagName('wkt')[0].textContent);
  317.                        features.push(new OpenLayers.Feature.Vector(g));
  318.                    }
  319.                    result.addFeatures(features);
  320.                }
  321.  
  322.  
  323.            }
  324.  
  325.  
  326.           function osm_getTileURL(bounds) {
  327.  
  328.                var res = this.map.getResolution();
  329.  
  330.                var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
  331.  
  332.                var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
  333.  
  334.                var z = this.map.getZoom();
  335.  
  336.                var limit = Math.pow(2, z);
  337.  
  338.  
  339.  
  340.                if (y < 0 || y >= limit) {
  341.  
  342.                     return OpenLayers.Util.getImagesLocation() + "404.png";
  343.  
  344.                 } else {
  345.  
  346.                     x = ((x % limit) + limit) % limit;
  347.  
  348.                     return this.url + z + "/" + x + "/" + y + "." + this.type;
  349.  
  350.                 }
  351.  
  352.             }
  353.  
  354.         </script>
  355.   </head>
  356.   <body onload="init()">
  357.         <div id="map"></div>
  358.  
  359.         <ul>
  360.           <li>
  361.             <input type="radio" name="control" id="noneToggle"
  362.                   onclick="toggleControl(this);" checked="checked" />
  363.             <label for="noneToggle">Navegar</label>
  364.           </li>
  365.           <li>
  366.             <input type="radio" name="control" value="start" id="startToggle"
  367.                   onclick="toggleControl(this);" />
  368.             <label for="startToggle">Definir ponto de partida</label>
  369.           </li>
  370.           <li>
  371.             <input type="radio" name="control" value="stop" id="stopToggle"
  372.                   onclick="toggleControl(this);" />
  373.             <label for="stopToggle">Definir ponto de destino</label>
  374.           </li>
  375.         </ul>
  376.  
  377.         <select id="method">
  378.           <option value="SPD">Shortest Path Dijkstra - undirected (BBox)</option>
  379.  
  380.         </select>
  381.         <button onclick="compute()">Calcular percurso</button>
  382.    
  383.  
  384.   </body>
  385. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement