Projet HMIN113M - SIG3T : médiatisation “artisanale” de

Projet HMIN113M - SIG3T :
médiatisation “artisanale” de données géographiques
Pierre Pompidor
Architecture du projet
Le projet sera constitué de trois parties :
— le “tier” données : des données struturées sous forme d’un ou plusieurs fichiers textes, et définissant plusieurs
couches d’informations géographiques superposables ;
— le “tier” application : un ou plusieurs script Python paramétrés par l’utilisateur et
— permettant d’extraire les données correspondant aux couches spécifiées par l’utilisateur ;
— de générer un rendu graphique par la création de code SVG (Scalable Vector Graphics).
— le “tier” présentation : un ou plusieurs script HTML permettant de créer le formulaire permettant d’invoquer
le/les script(s) Python. (Nous pouvons considérer que la génération du code SVG fait également partie de ce tier).
Architecture du projet SIG "artisanal"
navigateur
Formu−
laire
Carte
Scripts Python :
− extraction des donnees
− generation du code SVG
Apache
GML
...
Protocole
CGI
Code SVG
Du côté du navigateur (client-side) :
Comment diviser le navigateur en deux parties (en deux frames)
grâce aux balises HTML suivantes placées dans un premier fichier HTML d’accueil :
— <frameset> : pour permettre un découpage horizontal ou vertical en sous-fenêtres ;
— <frame> : pour indiquer quelle sera la ressource (page HTML, code SVG...) à charger dans la sous-fenêtre.
Exemple :
<frameset cols="30%,*" border="2">
<frame src="formulaire.html" name="gauche" />
<frame src="carte.svg" name="droite" />
</frameset>
Comment émettre des paramètres à partir d’un formulaire :
grâce :
— à l’attribut action de la balise <form> qui permet de spécifier le script à appeler ;
— à l’attribut name de la balise <input> qui permet de nommer chaque paramètre ;
— et à la balise <input type=”submit”> qui permet de créer un bouton de soumission.
Exemple :
<form action="SIG.cgi">
<input type="checkbox" name="choix"
<input type="checkbox" name="choix"
<input type="checkbox" name="choix"
<br/>
<input type="submit" value="Générer
</form>
value="delim">
Délimitations </input> <br/>
value="voiesf"> Voies ferrées </input> <br/>
value="routes"> Routes
</input> <br/>
la carte" />
Du côté du serveur (server-side) :
Comment récupérer les paramètres issus de cases à cocher dans un script Python :
Voici un moyen simple pour récupérer des paramètres issus d’une sélection de cases à cocher :
import cgi
params= cgi.FieldStorage()
for choix in params.getlist("choix"):
print "<li>", choix, "</li>"
Comment extraire des données dans vos documents XML (GML, ...)
Supposons que vous avez autant de fichiers que de couches à afficher :
— delim.gml → pour les délimitations territoriales
— voiesf.gml → pour les voies ferrées
— ...
que dans ces fichiers apparaissent des coordonnées (en abscisse et en ordonnée) :
<ogr:geometryProperty><gml:LineString ...>
<gml;coordinates>774386.8,6278582.9 ... </gml:coordinates>
</gml:LineString></ogr:geometryProperty>
et que la variable choix contient le nom du fichier (hors suffixe)
voici un fragment de codes qui va extraire toutes les occurrences des balises X et Y :
fichier = "../DATA/"+choix+".xml"
fd = open(fichier)
if fd:
contenu= fd.read()
coordonnees = re.findall("<gml:coordinates>(.*?)</gml:coordinates>",contenu)
for coord in coordonnees :
... // production du code SVG
fd.close()
Premiers pas en SVG (Scalable Vector Graphics)
Rappel des codes d’exemple présentés en cours :
Dessin de deux yeux dans une tête :
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="70" cy="95" r="50" style="stroke:black;fill=none" />
<circle cx="55" cy="80" r="5" style="stroke:black;fill=black" />
<circle cx="85" cy="80" r="5" style="stroke:black;fill=black" />
</svg>
Et avec des moustaches et un sourire en forme de salière, on obtient un chat :
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="70" cy="95" r="50" style="stroke:black;fill=none"/>
<circle cx="55" cy="80" r="5" style="stroke:black;fill=black"/>
<circle cx="85" cy="80" r="5" style="stroke:black;fill=black"/>
<g id="moustaches">
<line x1="75" y1="95" x2="135" y2="85" style="stroke:black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke:black;"/>
</g>
<use xlink:href="#moustaches" transform="scale(-1 1) translate(-140 0)" />
<polyline points="65 65, 75 65, 72 75, 68 75" style="stroke:black; fill:yellow" />
</svg>
Création d’une petite animation (utilisez Opera ou Chromium) :
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg">
<!-- Dessin d’une courbe -->
<path d="M50 125, C100 25, 150 225, 200 125" style="fill:none; stroke:blue;" />
<!-- Dessin d’un triangle donc le barycentre est en 0:0 -->
<path d="M-10 -3, L10 -3, L0 -25z" style="fill:none; stroke:red;">
<!-- Association d’une animation qui suit la courbe -->
<animateMotion path="M50 125, C100 25, 150 225, 200 125"
rotate="auto" dur="5s" fill="freeze" />
</path>
</svg>
Pour définir l’échelle et la position de l’image à afficher :
deux attributs sont indispensables et à ajouter à la balise svg :
— viewBox → 4 valeurs : xmin, ymin, xmax-xmin, ymax-ymin
— preserveAspectRatio
→ faire une recherche sur le web pour comprendre leur utilisation !