Application WebMapping Interactif

01 — Architecture 3/3

Le projet repose sur une architecture trois tiers classique en webmapping : une base de données spatiale, un serveur cartographique et un client web. Chaque couche communique avec la suivante pour assurer un rendu dynamique et interactif.

Fig. 1 — Architecture 3/3 : Base de données → Serveur cartographique → Client web

02 — Interface finale

L'interface est divisée en trois blocs : les formulaires de recherche à gauche, la carte interactive OpenLayers au centre, et le panneau d'informations sur le cinéma sélectionné à droite.

Fig. 2 — Carte interactive OpenLayers : fond de carte © OpenStreetMap, points des cinémas (couche locale GeoJSON). Cliquez sur un point pour voir les informations.

Fig. 3 — Interface finale en localhost : formulaires de recherche, carte OpenLayers avec les cinémas de France (points bleus), panneau d'informations

03 — Formulaires de recherche dynamiques

Les formulaires permettent de filtrer les cinémas selon plusieurs critères simultanément. Les données sont récupérées depuis PostgreSQL via des requêtes SQL dynamiques en PHP.

Extrait PHP — requête SQL dynamique avec filtres combinés sur la base de données :

// Construction dynamique de la requête selon les filtres actifs
$sql = "SELECT ST_AsGeoJSON(geom) as geojson, nom, region_admi, dep, commune
         FROM \"etablissements-cinematographiques\" WHERE 1=1";

if (!empty($region)) {
    $sql .= " AND region_admi = '" . pg_escape_string($pg_conn, $region) . "'";
}
if (!empty($commune)) {
    $sql .= " AND LOWER(commune) = LOWER('"
           . pg_escape_string($pg_conn, $commune) . "')";
}

// Retour en GeoJSON pour OpenLayers
echo json_encode(["type" => "FeatureCollection", "features" => $features]);

04 — Contrôles cartographiques OpenLayers

La carte intègre plusieurs contrôles et interactions avancés d'OpenLayers pour une expérience utilisateur optimale.

Extrait JavaScript — récupération des données PHP et affichage dans OpenLayers en WFS :

// Récupération des cinémas filtrés depuis PHP en GeoJSON
const vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
        return 'BD_cinemas.php?region=' + region
               + '&departement=' + departement
               + '&ae=' + ae;
    },
    strategy: ol.loadingstrategy.bbox
});

// Affichage des informations au clic sur un cinéma
map.on('click', function(evt) {
    const feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature) { return feature; });
    if (feature) {
        const props = feature.getProperties();
        document.getElementById('info').innerHTML =
            `<b>${props.nom}</b><br>
             Commune: ${props.commune}<br>
             Département: ${props.dep}`;
    }
});

05 — Données et sources

Le projet combine données thématiques et fonds de carte issus de sources officielles ouvertes.

Données thématiques — Établissements cinématographiques 2023 (CNC) — data.culture.gouv.fr

📊 Données cinémas (SHP 2023) — data.culture.gouv.fr

🗺️ Limites administratives — IGN ADMIN-EXPRESS

🛰️ Fonds de carte — OSM, Plan IGN, Satellite SPOT IGN 2023

📡 Flux WMS/WFS — IGN Géoservices, OpenStreetMap

06 — Améliorations techniques envisagées