Bienvenue sur PostGIS.fr

Bienvenue sur PostGIS.fr , le site de la communauté des utilisateurs francophones de PostGIS.

PostGIS ajoute le support d'objets géographique à la base de données PostgreSQL. En effet, PostGIS "spatialise" le serverur PostgreSQL, ce qui permet de l'utiliser comme une base de données SIG.

Maintenu à jour, en fonction de nos disponibilités et des diverses sorties des outils que nous testons, nous vous proposons l'ensemble de nos travaux publiés en langue française.

source: trunk/workshop-routing-foss4g/web/routing-final.html @ 81

Revision 80, 4.8 KB checked in by djay, 13 years ago (diff)

Fix language in the code
  • Property svn:executable set to *
RevLine 
[76]1<html>
2<head>
3
[80]4<title>Une page GeoExt de base</title>
[76]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
[80]19     // Objets globaux projection (utilise la librairie proj4js)
[76]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) {
[80]25             // Effacer le chemin précédent
[76]26             store.removeAll();
27
[80]28             // Re-projÚte les deux géométries de EPSG:900913 et EPSG:4326
[76]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
[80]34             // Charge le chemin
[76]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() {
[80]46        // Création du paneau carte
[76]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
[80]60        // Création de la couche où le chemin sera dessiné
[76]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
[80]68        // Création de la couche où le point de départ et d'arrivée sront dessinés
[76]69        var points_layer = new OpenLayers.Layer.Vector("points");
70
[80]71        // Lorsqu'un nouveau point est ajouté à la couche, appeler la fonction pgrouting
[76]72        points_layer.events.on({
73            featureadded: function() {
74                pgrouting(store, points_layer, method.getValue());
75            }
76        });
77
[80]78        // Ajouter la couche à la carte
[76]79        map.addLayers([points_layer, route_layer]);
80
[80]81        // Création du control pour dessiner les point (voir le fichier DrawPoints.js)
[76]82        var draw_points = new DrawPoints(points_layer);
83
[80]84        // Création du control pour déplacer les points
[76]85        var drag_points = new OpenLayers.Control.DragFeature(points_layer, {
86            autoActivate: true
87        });
88
[80]89        // Lorsqu'un point est déplacé, appeler la fonction pgrouting
[76]90        drag_points.onComplete = function() {
91              pgrouting(store, points_layer, method.getValue());
92        };
93
[80]94        // Ajouter les controls à la carte
[76]95        map.addControls([draw_points, drag_points]);
96
[80]97        // Création du store pour interroger le service web
[76]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
[80]114        // Création de la liste déroulante
[76]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        });
[80]131        // Définir Disjkstra comme méthode par défaut
[76]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>
Note: See TracBrowser for help on using the repository browser.