Utilisation du proxy dans votre application Web
Cette section explique comment utiliser le proxy dans votre application Web.
Importation de ria.js
La première étape consiste à importer OpenLayers et la bibliothèque principale de l'API JavaScript. Pour ce faire, procédez comme suit :
<script type="text/javascript" src="http://<server>:<port>/ria/openlayers/OpenLayers.js"></script>
<script type="text/javascript" src="http://<server>:<port>/ria/ria.js"></script>
Remplacez localhost:8080 par le nom d'hôte et le numéro de port réels d'installation de l'API JavaScript.
Pour exposer publiquement des composants de l'API JavaScript dans votre application Web, il faut que toutes les ressources javascript à télécharger se trouvent dans une URL accessible au public (et que toutes les URL des fichiers js soient elles aussi accessibles au public).
Définition du chemin d'accès à votre proxy
Pour indiquer que les appels inter-domaines doivent être routés via un proxy, vous devez enregistrer le chemin d'accès au proxy comme suit :
ria.RestService.addProxy("/riaproxy/?url=");
Plutôt que d'appeler directement une URL d'un domaine différent, le code de la bibliothèque JavaScript ajoute l'URL codée à la fin du chemin d'accès précédemment enregistré et utilise le résultat pour lancer la requête. Le proxy prend l'URL du paramètre de requête (URL par défaut), demande la ressource associée et renvoie le résultat au code de la bibliothèque JavaScript sans y apporter aucune modification. Le chemin d'accès exact transmis à la méthode addProxy() dépend du proxy utilisé et de son déploiement.
Échantillon de code
Voici une simple page permettant d'effectuer une recherche de fonction :
<!DOCTYPE html>
<html>
<head>
<script src="http://<server>:<port>/ria/openlayers/OpenLayers.js"></script>
<script src="http://<server>:<port>/ria/ria.js"></script>
</head>
<body>
<button onclick="search();">Search</button>
<script>
ria.RestService.addProxy("/riaproxy/?url=");
function search() {
var fs = new ria.search.FeatureService(
"http://<server>:<port>/rest/Spatial/FeatureService");
var d = fs.searchNearest({
table: "/Samples/NamedTables/WorldcapTable",
geometry: new OpenLayers.Geometry.Point(12.875977, 47.813155),
srs: "epsg:4326",
attributes: ["Capital"],
withinDistance: "2000 mi",
distanceAttributeName: "dist",
maxFeatures: 10
});
d.addCallback(function(result) {alert(result.features.length + " result(s)")});
}
</script>
</body>
</html
Testez cet exemple d'application Web en l'affichant dans votre navigateur, puis en cliquant sur Rechercher.
Une boîte de dialogue apparaît. Elle affiche les résultat de la recherche de fonction :
Dans un débogueur Web comme Fiddler, vous afficher une liste des 10 résultats :
{"type":"FeatureCollection","Metadata":[{"type":"String","name":"Capital"},
{"type":"Double","name":"dist"}],"features":[{"type":"Feature","properties"
:{"Capital":"Ljubljana","dist":143.84489998699985}},{"type":"Feature","properties"
:{"Capital":"Vienna","dist":161.4848812627603}},{"type":"Feature","properties"
:{"Capital":"Vaduz","dist":163.332701859974}},{"type":"Feature","properties"
:{"Capital":"Prague","dist":173.87473824107374}},{"type":"Feature","properties"
:{"Capital":"Bratislava","dist":198.09553406882614}},{"type":"Feature","properties"
:{"Capital":"Zagreb","dist":201.31855154101802}},{"type":"Feature","properties"
:{"Capital":"Bern","dist":260.92616074609}},{"type":"Feature","properties"
:{"Capital":"San Marino","dist":267.4791030110629}},{"type":"Feature","properties"
:{"Capital":"Budapest","dist":290.00905102083885}},{"type":"Feature","properties"
:{"Capital":"Berlin","dist":325.56576583498344}}]}