Changes between Initial Version and Version 1 of MapServerTutorialFr


Ignore:
Timestamp:
Mar 27, 2008, 12:28:15 PM (16 years ago)
Author:
aboudreault
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • MapServerTutorialFr

    v1 v1  
     1[[PageOutline]]
     2= Fusion MapServer Tutoriel =
     3
     4== Introduction ==
     5
     6Ce tutoriel décrit comment construire une application de cartographie web utilisant Fusion et MapServer. Il présume que vous êtes familiés avec MapServer et son extension PHP.
     7
     8== Concepts essentiels ==
     9
     10Il est important que vous compreniez comment MapServer fonctionne. Si vous ne connaissez pas MapServer ou ne savez pas comment configurer une carte (mapfile) pour celui-ci, référez-vous à la documentation MapServer ([http://mapserver.gis.umn.edu/docs]).
     11
     12Fusion est un outil de développement pour la création d'application web. Il est donc évident que vous devrez avoir une certaine connaissance avec HTML, JavaScript et CSS afin de pouvoir l'utiliser. Principalement, Fusion a été développé avec le langage JavaScript. Cependant, il est possible d'ajouter des fonctionnalités côté serveur utilisant l'extension PHP/MapScript de MapServer (connaissance du langage PHP requise).
     13
     14Fusion utilise largement le HTML statique ainsi que la génération dynamique de ce même langage (DHTML). Vous devrez donc être familiés avec le modèle DOM (Document Object Model) implanté dans la plupart des navigateurs ainsi que les subtiles différences sur son fonctionnement entre les navigateurs. Il est possible d'utiliser Fusion sans aucun script utilisant le modèle DOM mais la plupart des applications doivent l'utiliser afin d'obtenir les effets et les fonctionnalités désirées.
     15
     16Fusion utilise également le CSS pour son aspect visuel. Cette technique de conception permet de styliser l'interface utilisateur des composants Fusion en utilisant le navigateur pour générer la page web afin d'alléger le travail du serveur. C'est la façon la plus efficace et naturelle pour la conception de page web et il réduit la taille du code JavaScript qui doit être exécuté sur le navigateur client. Vous devrez donc connaître le CSS afin de pouvoir personnaliser l'interface Fusion. Un style par défaut pour Fusion est fournit et des modifications modérées de celui-ci ne demandent pas de compétences avancées du CSS.
     17
     18== Préalable pour le tutoriel ==
     19
     20 * '''Fusion''': [http://trac.osgeo.org/fusion/wiki/GetIt]
     21 * '''Donnés MapServer gmap-ms46''': [http://dl.maptools.org/dl/]
     22 * '''icons-demo.zip'''
     23
     24== Installation ==
     25
     26L'installation de Fusion est très simple. Évidemment, je présume que vous avez un serveur web fonctionnel avec MapServer. Un fois Fusion et gmap-ms46 téléchargés, l'étape suivante est bien sûr d'extracter les fichiers zip. Dans mon exemple, '''/opt/fgs/www/htdocs/''' est mon répertoire web.
     27{{{
     28$ unzip fusion-1.0.4.zip -d /opt/fgs/www/htdocs/
     29$ unzip gmap-ms46.zip -d /opt/fgs/www/htdocs/
     30}}}
     31
     32Fusion est maintenant installé ainsi que notre carte MapServer qui servira d'exemple dans ce tutoriel.
     33
     34== Configuration ==
     35
     36C'est le moment de configurer Fusion. Il y a qu'un seul fichier de configuration général pour Fusion: '''config.json'''. Dans ce fichier, vous pourrez modifier le langage de script utilisé par Fusion (seul PHP est supporté pour l'instant) ainsi que différents chemins d'accès web qui dépendent de la configuration de votre serveur web. Pour ce tutoriel, je n'ai pas eu à le modifier car les chemins d'accès par défaut étaient bons. Vous devriez cependant vérifier si le chemin d'accès web pour l'application MapServer et fichiers temporaires sont corrects. Si vous laissez la variable "temporaryDirectory" à sa valeur par défaut ("/tmp"), assurez vous que votre configuration php ait le même chemin (php5.ini devrait avoir une ligne semblable: session.save_path = "/tmp")
     37{{{
     38...
     39 "mapserver": {
     40            /* The URL of the mapserver CGI that you want to use.  */
     41            "cgi": "/cgi-bin/mapserv",
     42}}}
     43
     44== Application Fusion ==
     45
     46Afin de vous démontrer le fonctionnement de Fusion, nous allons créer une petite application utilisant les données MapServer gmap-ms46. Voici donc les fonctionnalités (widgets) que notre application supportera:
     47
     48 * un widget Map
     49 * un widget Zoom avant
     50 * un widget Zoom arrière
     51 * un widget Navigation
     52 * un widget Legende
     53
     54Ces widgets doivent être décris dans un fichier xml nommé ApplicationDefinition. Ce fichier à pour utilité de décrire la configuration d'une application Fusion: mapfile, ressource, widgets. Ce fichier contiendra bien sur une section MapFile pour notre MapServer ainsi plusieurs widgets (section Widget) à l'intérieur d'une section WidgetSet (référez-vous à la page ApplicationDefinition pour une description complète).
     55
     56Créons tout d'abord un répertoire pour notre application. Extracter également les icônes que vous avez téléchargées. Celles-ci seront utilisées par les widgets.
     57{{{
     58$ mkdir /opt/fgs/www/htdocs/demo
     59$ unzip icons-demo.zip -d /opt/fgs/www/htdocs/demo
     60}}}
     61
     62À l'intérieur de ce répertoire, créer un nouveau fichier ApplicationDefinition.xml et incorporer le contenu suivant:
     63{{{
     64<?xml version="1.0" encoding="UTF-8"?>
     65<ApplicationDefinition xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xsi:noNamespaceSchemaLocation="ApplicationDefinition-1.0.0.xsd">
     66  <MapSet xsi:type="MapSetType">x
     67    <MapGroup id="mapserver" xsi:type="MapType">   
     68     
     69      <Map xsi:type="MapLayerType">
     70        <Type>MapServer</Type>
     71        <SingleTile>true</SingleTile>
     72        <Extension>
     73          <MapFile>/opt/fgs/www/htdocs/gmap-ms46/htdocs/gmap75.map</MapFile>
     74        </Extension>
     75      </Map>
     76   
     77    </MapGroup>
     78  </MapSet>
     79
     80  <WidgetSet xsi:type="WidgetSetType">
     81 
     82     <MapWidget xsi:type="WidgetType">
     83      <Name>Map</Name>
     84      <Type>Map</Type>
     85      <StatusItem>The map.</StatusItem>
     86      <MapId>mapserver</MapId>
     87    </MapWidget>
     88
     89  <Widget xsi:type="UiWidgetType">
     90      <Name>Pan</Name>
     91      <Type>Pan</Type>
     92      <Description>Drag the map to view areas out of range.</Description>
     93      <ImageUrl>icons/pan.png</ImageUrl>
     94      <ImageClass/>
     95      <Tooltip>Pan mode</Tooltip>
     96      <Label/>
     97      <Disabled/>
     98  </Widget>
     99 
     100  <Widget xsi:type="UiWidgetType">
     101    <Name>ZoomIn</Name>
     102    <Type>Zoom</Type>
     103    <Description>Zoom</Description>
     104    <ImageUrl>icons/zoom-in.png</ImageUrl>
     105    <ImageClass/>
     106    <Tooltip>ZoomIn Mode</Tooltip>
     107    <Label/>
     108    <Disabled/>
     109    <Extension xsi:type="CustomContentType">
     110        <Tolerance>5</Tolerance>
     111        <Factor>2</Factor>
     112        </Extension>
     113  </Widget>
     114
     115 <Widget xsi:type="UiWidgetType">
     116    <Name>ZoomOut</Name>
     117    <Type>Zoom</Type>
     118    <Description>Zoom</Description>
     119    <ImageUrl>icons/zoom-out.png</ImageUrl>
     120    <ImageClass/>
     121    <Tooltip>ZoomOut Mode</Tooltip>
     122    <Label/>
     123    <Disabled/>
     124    <Extension xsi:type="CustomContentType">
     125        <Tolerance>5</Tolerance>
     126        <Factor>2</Factor>
     127        <Direction>out</Direction>
     128      </Extension>
     129  </Widget>
     130 
     131  <Widget xsi:type="WidgetType">
     132    <Name>Legend</Name>
     133    <Type>Legend</Type>
     134    <StatusItem/>
     135  </Widget>
     136 
     137  </WidgetSet>
     138  <Extension/>
     139</ApplicationDefinition>
     140}}}
     141
     142Modifier ensuite le chemin d'accès de la mapfile (section MapFile). Si vous analysez un peu ce fichier, vous remarquez qu'il y a une section widget pour chaque fonctionnalité ainsi que ses options. La plupart de ses options ne sont pas obligatoire. Créez maintenant une page HTML nommé index.html qui servira de "template" pour Fusion.
     143{{{
     144<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     145<html xmlns="http://www.w3.org/1999/xhtml">
     146  <head>
     147    <title>Fusion MapServer Tutorial</title>
     148    <script type="text/javascript" src="../fusion/lib/fusion.js"></script>
     149    <style type="text/css">
     150      @import url(../fusion/jx/css/jxskin-graphic.css);
     151      #bodyContent { position:relative; background-color:#dfe9f5; border: thin solid #000000; height:411px; width:760px; margin-top:25px;}
     152      #Map { position:absolute; top:35px; right:5px; width:439px; height:349px; border: thin solid #000000; float: right; visibility: visible; display:block; }
     153      #Legend { position:absolute; top:35px; left:5px; width:300px; height:349px; background-color:#ffffff; border: thin solid #000000; overflow-y: auto; overflow-x:hidden; }
     154      #toolbar { position:absolute; left: 310px; }
     155    </style>
     156    <script type="text/javascript">
     157      window.onload = function() {
     158         Fusion.initialize();
     159      }
     160    </script>
     161  </head>
     162  <body>
     163    <center>
     164      <div id="bodyContent">
     165        <div id="toolbar">
     166          <div id="Pan" ></div>
     167          <div id="ZoomIn"></div>
     168          <div id="ZoomOut"></div>
     169        </div>
     170        <div id="Legend" align="left"></div>
     171        <div id="Map"></div>
     172      </div>
     173    </center>
     174  </body>
     175</html>
     176}}}
     177
     178Vous devriez maintenant être en mesure de tester votre application.