Skip to content
GeoViewer 5

Patterns d'interaction

Pourquoi parler de patterns

La plupart des intégrations applicatives autour de Geoviewer retombent sur quelques schémas simples. Si vous choisissez le bon pattern dès le départ, vous trouvez plus vite le bon objet API et vous évitez de mélanger état métier et état carto.

1. Application -> carte

Cas typiques:

  • injecter des points depuis une API métier
  • zoomer sur une entité sélectionnée dans un formulaire
  • afficher des résultats filtrés par l’application

Points d’entrée API:

  • viewerService.mapManager
  • mapManager.addGraphicMapService(...)
  • mapManager.tools.featureFactory
  • mapManager.tools.zoom

Snippet minimal:

const layer = viewerService.mapManager.addGraphicMapService({ ...config });
const feature = viewerService.mapManager.tools.featureFactory.createPoint({ x, y, wkid: 4326 });
layer.addFeature(feature);
viewerService.mapManager.tools.zoom.zoomToFeature(feature);

Recette liée:

2. Carte -> application

Cas typiques:

  • récupérer un dessin et le stocker en GeoJSON
  • réagir à un clic sur un objet graphique
  • alimenter un champ ou un workflow métier depuis une interaction carto

Points d’entrée API:

  • mapManager.tools.events
  • mapManager.tools.draw
  • mapManager.tools.featureConverter

Snippet minimal:

const drawTool = viewerService.mapManager.tools.draw.create({ layer });


drawTool.create({
    type: 'polygon',
    onDrawComplete: (feature) => {
        const geoJson = viewerService.mapManager.tools.featureConverter.geoJSON.toGeoJSON([feature]);
        console.log(geoJson);
    },
});

Recette liée:

3. Synchronisation bidirectionnelle

Cas typiques:

  • filtres externes qui mettent à jour la carte
  • clics sur la carte qui mettent à jour une liste ou un panneau
  • application et viewer qui partagent la même sélection

Recommandation clé:

  • gardez une source de vérité unique côté application
  • considérez la carte comme une vue spécialisée, pas comme le seul store métier

Points d’entrée API:

  • mapManager.addGraphicMapService(...)
  • mapManager.tools.events
  • mapManager.tools.featureFactory

Snippet minimal:

function applyState(filteredItems) {
    renderBusinessList(filteredItems);
    refreshGraphicsLayer(filteredItems);
}

Recette liée:

4. Workflow carto métier

Cas typiques:

  • dessiner ou modifier une géométrie
  • produire une image ou un extrait cartographique
  • intégrer le résultat dans un rapport ou un dossier métier

Points d’entrée API:

  • mapManager.tools.draw
  • mapManager.tools.report
  • mapManager.openPopup(...)
  • mapManager.tools.featureConverter

Snippet minimal:

const screenshotBlob = await viewerService.mapManager.tools.report.downloadAdvancedScreenshot('HORIZONTAL');
const imageUrl = URL.createObjectURL(screenshotBlob);
previewImage.src = imageUrl;

Recette liée:

Comment choisir rapidement

  • si l’application pousse des données vers la carte: pensez mapManager + featureFactory
  • si la carte doit renvoyer une géométrie ou une interaction: pensez events + draw + featureConverter
  • si carte et UI doivent rester alignées: pensez “source de vérité unique”
  • si vous devez produire un livrable métier: pensez draw + report

Aller plus loin