ReLucBlog

Aller au contenu | Aller au menu | Aller à la recherche

OpenLayers côté serveur avec Jaxer

Par René-Luc D'Hont le jeudi 7 février 2008, 11:08 - Système d'Information Géographique (SIG) - Lien permanent

OpenLayers est une bibliothèque de fonction JavaScript OpenSource permettant d'ajouter facilement des cartes dynamiques à une page Web.
Jaxer est le premier serveur AJAX publié par Aptana. C'est en fait un module du serveur Apache2 basé sur les technologies Mozilla.

Voici un exemple de l'utilisation d'OpenLayers côté serveur avec Jaxer :

<html>
<head>
  <title>OpenLayers Jaxer Example</title>
  <style type="text/css">
    #map {
      width: 1024px;
      height: 512px;
      border: 1px solid black;
    }
  </style>
  <script src="OpenLayersJaxer.js" runat="server"></script>
  <script runat="server">
    function getMexicoURL(){
      return "file:///home/reluc/GIS/data/mexico.sqlite";
    }
   
    function getMexicoLayer(layerName) {
      var OpenLayers = getOpenLayers();
      var url = getMexicoURL();

      var provider = new OpenLayers.Provider.SQLite(layerName,url,{table:layerName});
      var features = provider.features;

      var geojson = new OpenLayers.Format.GeoJSON();
      var layer = {};
      layer.name = layerName;
      layer.features = geojson.write(features);
      return layer;
    }
    getMexicoLayer.proxy = true;

    function load(){
      var layers = [
      {
        type : 'WMS',
        args : {
          name : "OpenLayers WMS",
          url : "http://labs.metacarta.com:80/wms/vmap0?",
          params : {layers: "basic"},
          options : {wrapDateLine: true}
        }
      }
      ];
      Jaxer.clientData.layers = layers;
    }
  </script>
  <script src="http://openlayers.org/dev/lib/OpenLayers.js" runat="client"></script>
  <script>
    var map;
    function init() {
      var options = {
        theme: "http://openlayers.org/dev/theme/default/",
        NumZoomLevels: 24
      }; 
      map = new OpenLayers.Map("map",options);
      var layers = Jaxer.clientData.layers;
      for (var l=0; l<layers.length; l++) {
        var layer = layers[
                          l];
        var argStr = "";
        for (var a in layer.args) {
          if (argStr != "") argStr += ",";
          argStr += "layer.args['"+
                            a+"' ]";
        }
        layer = eval("new OpenLayers.Layer[
                                     layer.type]("+argStr+");");
        map.addLayer(layer);
      }
      map.zoomToMaxExtent();
      getMexicoLayerAsync(addLayer,'states');
    }

    function addLayer(jLayer) {
      alert(jLayer);
      var geojson = new OpenLayers.Format.GeoJSON();
      var features = geojson.read(jLayer.features);
      var layer = new OpenLayers.Layer.Vector(jLayer.name,{style:jLayer.style});
      layer.addFeatures(features);
      map.addLayer(layer);
    }
  </script>
</head>
<body onserverload="load()" onload="init()">
  <div id="map"/>
</body>
</html>

Petite explication de texte :

  • Tout d'abord vous pouvez lire sur les éléments script la présence ou non d'un attribut runat. Cet attribut permet de spécifier si le code doit être éxécuter sur le server ou sur le client (dans le navigateur). Si cet attribut n'est pas présent le code ne sera pas éxécuter sur le serveur.
  • Ensuite la propriété proxy de la méthode getMexicoLayer est mis à "true", ce qui signifie que cette méthode sera accéssible au client de façon synchrone ou asynchrone. Afin de ne pas bloquer l'interface j'appelle getMexicoLayerAsync dans la méthode init éxécuter par le client une fois que la page est chargé. la méthode getMexicoLayerAsync est générée par Jaxer une fois que l'ensemble de la page a été traité côté serveur.
  • Un nouvel évènement est utilisable avec Jaxer, ServerLoad, via l'attribut onserverload, qui permet d'éxécuter une méthode côté serveru une fois que l'ensemble de la page ait été chargé par Jaxer. Dans mon cas j'utilise la méthode load afin de modifier l'objet Jaxer.clientData qui permet de passer des données du serveur au client, comme ici afin de passer une liste de baselayer à afficher.
  • Pour OpenLayers côté serveur j'ai été obligé de modifier le fichier OpenLayers.js en OpenLayersJaxer.js. Jaxer ne sauvegarde que des méthodes, j'ai donc dût créer une méthode getOpenLayers permettant de récupérer l'Objet OpenLayers.
  • Enfin afin de simplifier la création de features vectorielles, j'ai créé un nouveau type d'objet OpenLayers : OpenLayers.Provider. C'est un équivalent d'OpenLayers.Layer.Vector mais sans aucune notion de rendu ou de carte.

L'utilisation d'OpenLayers côté serveur permet :

  • de déporter sur le serveur les traitements des sources de données vectoriels (XML et autre). Du côté client seul les Formats JSON et GeoJSON sont nécessaires ;
  • de ne manipuler que du HTML et du JavaScript côté client ;
  • d'avoir les mêmes objets côté serveur et côté client. On est ainsi sûr de ne pas avoir d'erreurs d'interprétation des données.

Voici une bonne démonstration de l'intérêt de l'utilisation de Jaxer pour le développement d'une solution RIA accessible aux différenst navigateur du marché et ceux-ci à moindre coût.