Synchroniser un dessin en GeoJSON avec un formulaire métier

Objectif

Pattern associé: carte -> application.

L’objectif est de laisser l’utilisateur dessiner ou modifier une géométrie dans le viewer, puis de synchroniser automatiquement cette géométrie dans un champ de formulaire métier au format GeoJSON.

Objets API utilisés

Flux de données

l’application récupère viewerService
elle crée une couche GRAPHICS éditable
elle crée un drawTool sur cette couche
à chaque dessin ou modification, elle convertit la feature en GeoJSON
elle écrit ce GeoJSON dans un champ du formulaire
si le formulaire contient déjà une géométrie, elle peut la réinjecter dans la couche

Snippet minimal

<textarea id="geometry-field" rows="12"></textarea>
<button id="start-draw" type="button">Dessiner un polygone</button>
<geoviewer-esri-element id="viewer"></geoviewer-esri-element>

<script type="module">
    const viewerElement = document.getElementById('viewer');
    const geometryField = document.getElementById('geometry-field');
    const startDrawButton = document.getElementById('start-draw');

    function writeGeoJson(feature, featureConverter) {
        const geoJson = featureConverter.geoJSON.toGeoJSON([feature]);
        geometryField.value = JSON.stringify(geoJson, null, 2);
    }

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

            const drawingLayer = mapManager.addGraphicMapService({
                id: 'business-form-drawing',
                type: 'GRAPHICS',
                label: 'Géométrie métier',
                visible: true,
                removable: true,
                identifiable: true,
                editing: true,
                isDraw: true,
                toc: {
                    visible: true,
                    open: false,
                },
                objectIdProperty: 'id',
            });

            const drawTool = draw.create({ layer: drawingLayer });

            startDrawButton.addEventListener('click', () => {
                drawTool.create({
                    type: 'polygon',
                    onDrawUpdate: (feature) => writeGeoJson(feature, featureConverter),
                    onDrawComplete: (feature) => writeGeoJson(feature, featureConverter),
                });
            });

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

                drawTool.update(feature, {
                    onDrawUpdate: (updatedFeatures) => {
                        const [updatedFeature] = updatedFeatures;
                        if (updatedFeature) {
                            writeGeoJson(updatedFeature, featureConverter);
                        }
                    },
                    onDrawComplete: (updatedFeatures) => {
                        const [updatedFeature] = updatedFeatures;
                        if (updatedFeature) {
                            writeGeoJson(updatedFeature, featureConverter);
                        }
                    },
                });
            });

            if (geometryField.value.trim()) {
                const restoredFeatures = featureConverter.geoJSON.fromGeoJSON(JSON.parse(geometryField.value));
                drawingLayer.addFeatures(restoredFeatures ?? []);
            }
        });
    });
</script>

Pièges fréquents

Distinguez bien drawTool.create(...) et drawTool.update(...). Le premier crée une nouvelle géométrie, le second modifie une feature existante.
Les callbacks de création reçoivent une feature unique. Les callbacks de mise à jour reçoivent un tableau de features.
Si votre formulaire est la source de vérité, écrivez toujours dans le champ au moment du dessin et de l’édition, puis restaurez la géométrie depuis ce champ au rechargement.
Évitez de stocker en parallèle une version GeoJSON et une version feature non synchronisées.