Skip to content
GeoViewer 5

Éditer un polygone et générer une image pour un rapport

Objectif

Pattern associé: workflow carto métier.

L’objectif est de laisser l’utilisateur tracer ou ajuster un polygone, puis de générer une image de la carte que l’application pourra intégrer dans un rapport métier, un dossier ou un export documentaire.

Objets API utilisés

Flux de données

  1. l’application crée une couche GRAPHICS éditable
  2. elle lance le dessin d’un polygone
  3. elle autorise sa modification au clic
  4. elle centre la carte si nécessaire sur la géométrie utile
  5. elle appelle report.downloadAdvancedScreenshot(...)
  6. elle réutilise le Blob généré dans son propre rapport métier

Snippet minimal

<button id="draw-polygon" type="button">Dessiner</button>
<button id="generate-image" type="button">Générer l'image</button>
<img id="report-preview" alt="Prévisualisation du rapport cartographique" />
<geoviewer-esri-element id="viewer"></geoviewer-esri-element>


<script type="module">
    const viewerElement = document.getElementById('viewer');
    const drawPolygonButton = document.getElementById('draw-polygon');
    const generateImageButton = document.getElementById('generate-image');
    const previewImage = document.getElementById('report-preview');


    viewerElement.onViewerServiceReady((viewerService) => {
        viewerService.onReady(() => {
            const mapManager = viewerService.mapManager;
            const { draw, events, report, zoom } = mapManager.tools;


            const reportLayer = mapManager.addGraphicMapService({
                id: 'report-area',
                type: 'GRAPHICS',
                label: 'Emprise du rapport',
                visible: true,
                removable: true,
                identifiable: true,
                editing: true,
                isDraw: true,
                toc: {
                    visible: true,
                    open: false,
                },
                objectIdProperty: 'id',
            });


            const drawTool = draw.create({ layer: reportLayer });
            let currentFeature = null;


            drawPolygonButton.addEventListener('click', () => {
                drawTool.create({
                    type: 'polygon',
                    onDrawComplete: async (feature) => {
                        currentFeature = feature;
                        await zoom.zoomToFeature(feature);
                    },
                });
            });


            events.listenGraphicMapServiceClick(reportLayer, (features) => {
                const [feature] = features;
                if (!feature) {
                    return;
                }


                currentFeature = feature;
                drawTool.update(feature, {
                    onDrawComplete: async (updatedFeatures) => {
                        const [updatedFeature] = updatedFeatures;
                        if (!updatedFeature) {
                            return;
                        }


                        currentFeature = updatedFeature;
                        await zoom.zoomToFeature(updatedFeature);
                    },
                });
            });


            generateImageButton.addEventListener('click', async () => {
                if (!currentFeature) {
                    return;
                }


                await zoom.zoomToFeature(currentFeature);


                const blob = await report.downloadAdvancedScreenshot('HORIZONTAL');
                const imageUrl = URL.createObjectURL(blob);


                previewImage.src = imageUrl;
            });
        });
    });
</script>

Pièges fréquents

  • downloadAdvancedScreenshot(...) produit une image de la carte, pas un rapport métier complet mis en page.
  • Générez l’image quand la carte est dans l’état souhaité: extent, fond de plan, couches visibles et éventuelle popup ouverte ou fermée selon votre besoin.
  • Pensez à libérer les URL créées avec URL.revokeObjectURL(...) quand vous remplacez une image déjà générée.
  • Selon les couches affichées et leurs contraintes d’accès, la capture peut dépendre de droits ou de comportements cross-origin.

Liens vers l’API technique

Aller plus loin