| [76] | 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | |
|---|
| 4 | <title>A Basic GeoExt Page</title> |
|---|
| 5 | <script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script> |
|---|
| 6 | <script src="ext/ext-all.js" type="text/javascript"></script> |
|---|
| 7 | <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> |
|---|
| 8 | <script src="OpenLayers/OpenLayers.js" type="text/javascript"></script> |
|---|
| 9 | <script src="GeoExt/script/GeoExt.js" type="text/javascript"></script> |
|---|
| 10 | <link rel="stylesheet" type="text/css" |
|---|
| 11 | href="GeoExt/resources/css/geoext-all.css" /> |
|---|
| 12 | |
|---|
| 13 | <script src="DrawPoints.js" type="text/javascript"></script> |
|---|
| 14 | |
|---|
| 15 | <script src="proj4js/lib/proj4js.js" type="text/javascript"></script> |
|---|
| 16 | |
|---|
| 17 | <script type="text/javascript"> |
|---|
| 18 | |
|---|
| 19 | // global projection objects (uses the proj4js lib) |
|---|
| 20 | var epsg_4326 = new OpenLayers.Projection("EPSG:4326"), |
|---|
| 21 | epsg_900913 = new OpenLayers.Projection("EPSG:900913"); |
|---|
| 22 | |
|---|
| 23 | function pgrouting(store, layer, method) { |
|---|
| 24 | if (layer.features.length == 2) { |
|---|
| 25 | // erase the previous route |
|---|
| 26 | store.removeAll(); |
|---|
| 27 | |
|---|
| 28 | // transform the two geometries from EPSG:900913 to EPSG:4326 |
|---|
| 29 | var startpoint = layer.features[0].geometry.clone(); |
|---|
| 30 | startpoint.transform(epsg_900913, epsg_4326); |
|---|
| 31 | var finalpoint = layer.features[1].geometry.clone(); |
|---|
| 32 | finalpoint.transform(epsg_900913, epsg_4326); |
|---|
| 33 | |
|---|
| 34 | // load to route |
|---|
| 35 | store.load({ |
|---|
| 36 | params: { |
|---|
| 37 | startpoint: startpoint.x + " " + startpoint.y, |
|---|
| 38 | finalpoint: finalpoint.x + " " + finalpoint.y, |
|---|
| 39 | method: method |
|---|
| 40 | } |
|---|
| 41 | }); |
|---|
| 42 | } |
|---|
| 43 | } |
|---|
| 44 | |
|---|
| 45 | Ext.onReady(function() { |
|---|
| 46 | // create the map panel |
|---|
| 47 | var panel = new GeoExt.MapPanel({ |
|---|
| 48 | renderTo: "gxmap", |
|---|
| 49 | map: { |
|---|
| 50 | layers: [new OpenLayers.Layer.OSM("Simple OSM Map")] |
|---|
| 51 | }, |
|---|
| 52 | center: [-11685000, 4827000], |
|---|
| 53 | zoom: 12, |
|---|
| 54 | height: 400, |
|---|
| 55 | width: 600, |
|---|
| 56 | title: "A Simple GeoExt Map" |
|---|
| 57 | }); |
|---|
| 58 | var map = panel.map; |
|---|
| 59 | |
|---|
| 60 | // create the layer where the route will be drawn |
|---|
| 61 | var route_layer = new OpenLayers.Layer.Vector("route", { |
|---|
| 62 | styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({ |
|---|
| 63 | strokeColor: "#ff9933", |
|---|
| 64 | strokeWidth: 3 |
|---|
| 65 | })) |
|---|
| 66 | }); |
|---|
| 67 | |
|---|
| 68 | // create the layer where the start and final points will be drawn |
|---|
| 69 | var points_layer = new OpenLayers.Layer.Vector("points"); |
|---|
| 70 | |
|---|
| 71 | // when a new point is added to the layer, call the pgrouting function |
|---|
| 72 | points_layer.events.on({ |
|---|
| 73 | featureadded: function() { |
|---|
| 74 | pgrouting(store, points_layer, method.getValue()); |
|---|
| 75 | } |
|---|
| 76 | }); |
|---|
| 77 | |
|---|
| 78 | // add the layers to the map |
|---|
| 79 | map.addLayers([points_layer, route_layer]); |
|---|
| 80 | |
|---|
| 81 | // create the control to draw the points (see the DrawPoints.js file) |
|---|
| 82 | var draw_points = new DrawPoints(points_layer); |
|---|
| 83 | |
|---|
| 84 | // create the control to move the points |
|---|
| 85 | var drag_points = new OpenLayers.Control.DragFeature(points_layer, { |
|---|
| 86 | autoActivate: true |
|---|
| 87 | }); |
|---|
| 88 | |
|---|
| 89 | // when a point is moved, call the pgrouting function |
|---|
| 90 | drag_points.onComplete = function() { |
|---|
| 91 | pgrouting(store, points_layer, method.getValue()); |
|---|
| 92 | }; |
|---|
| 93 | |
|---|
| 94 | // add the controls to the map |
|---|
| 95 | map.addControls([draw_points, drag_points]); |
|---|
| 96 | |
|---|
| 97 | // create the store to query the web service |
|---|
| 98 | var store = new GeoExt.data.FeatureStore({ |
|---|
| 99 | layer: route_layer, |
|---|
| 100 | fields: [ |
|---|
| 101 | {name: "length"} |
|---|
| 102 | ], |
|---|
| 103 | proxy: new GeoExt.data.ProtocolProxy({ |
|---|
| 104 | protocol: new OpenLayers.Protocol.HTTP({ |
|---|
| 105 | url: "./php/pgrouting.php", |
|---|
| 106 | format: new OpenLayers.Format.GeoJSON({ |
|---|
| 107 | internalProjection: epsg_900913, |
|---|
| 108 | externalProjection: epsg_4326 |
|---|
| 109 | }) |
|---|
| 110 | }) |
|---|
| 111 | }) |
|---|
| 112 | }); |
|---|
| 113 | |
|---|
| 114 | // create the method combo box |
|---|
| 115 | var method = new Ext.form.ComboBox({ |
|---|
| 116 | renderTo: "method", |
|---|
| 117 | triggerAction: "all", |
|---|
| 118 | editable: false, |
|---|
| 119 | forceSelection: true, |
|---|
| 120 | store: [ |
|---|
| 121 | ["SPD", "Shortest Path Dijkstra"], |
|---|
| 122 | ["SPA", "Shortest Path A*"], |
|---|
| 123 | ["SPS", "Shortest Path Shooting*"] |
|---|
| 124 | ], |
|---|
| 125 | listeners: { |
|---|
| 126 | select: function() { |
|---|
| 127 | pgrouting(store, points_layer, method.getValue()); |
|---|
| 128 | } |
|---|
| 129 | } |
|---|
| 130 | }); |
|---|
| 131 | // default method is Shortest Path Dijkstra |
|---|
| 132 | method.setValue("SPD"); |
|---|
| 133 | }); |
|---|
| 134 | </script> |
|---|
| 135 | </head> |
|---|
| 136 | <body> |
|---|
| 137 | <div id="gxmap"></div> |
|---|
| 138 | <div id="method"></div> |
|---|
| 139 | </body> |
|---|
| 140 | </html> |
|---|
