Skip to content
GeoViewer 5

Source MeasureSurface

Source MeasureSurface

Cette page est générée automatiquement à partir du dépôt local au moment de la génération de la documentation.

Fichiers inclus

packages/common/src/lib/widgets/measure/surface/measure-surface.declaration.ts

packages/common/src/lib/widgets/measure/surface/measure-surface.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type MeasureSurfaceConfig, measureSurfaceConfigSchema } from './measure-surface.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


export const declaration = {
    factory: () => import('./MeasureSurface.svelte').then((MeasureSurface) => widgetFactorySvelte(MeasureSurface)),
    schema: () => measureSurfaceConfigSchema,
} satisfies WidgetDeclaration;


export type MeasureSurfaceProps = WidgetProps<MeasureSurfaceConfig>;

packages/common/src/lib/widgets/measure/surface/measure-surface.config.ts

packages/common/src/lib/widgets/measure/surface/measure-surface.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { i18nSchemaFrom } from '$lib/api/managers/i18n';
import { measureI18n } from '$lib/widgets/measure/measure.i18n';
import { measureSurfaceI18n } from '$lib/widgets/measure/surface/measure-surface.i18n';
import { z } from 'zod';
import { polygonSymbolSchema } from '$lib/api/symbol';


export const measureSurfaceConfigSchema = defineWidgetConfig({
    icon: {
        geoviewer: 'geoviewer-polygon',
    },
    title: measureSurfaceI18n['tab-title'],
    onActivate: {
        deactivate: {
            classes: ['MeasureDistance', 'AdvancedSearch', 'Report', 'Export', 'Identify', 'AddData', 'Draw'],
        },
    },
    inToolbar: inToolbarSchemaFrom({
        type: 'button',
    }),
    i18n: i18nSchemaFrom({ ...measureSurfaceI18n, ...measureI18n }),
    config: z
        .object({
            symbol: polygonSymbolSchema,
        })
        .prefault({}),
});


export type MeasureSurfaceConfig = z.infer<typeof measureSurfaceConfigSchema>;

packages/common/src/lib/widgets/measure/surface/measure-surface.i18n.ts

packages/common/src/lib/widgets/measure/surface/measure-surface.i18n.ts
import type { I18nRegistry } from '$lib/api/managers/i18n';


export const measureSurfaceI18n = {
    title: {
        fr: 'Mesurer une surface',
        nl: 'NL - Mesurer une surface',
    },
    'tab-title': {
        fr: 'Surface',
        nl: 'NL - Surface',
    },
    'layer-name': {
        fr: 'Mesure par polygone',
        nl: 'NL - Mesure par polygone',
    },
    surface: {
        fr: 'Surface',
        nl: 'NL - Surface',
    },
    perimeter: {
        fr: 'Périmètre',
        nl: 'NL - Périmètre',
    },
    'square-meters': {
        fr: 'mètres carrés',
        nl: 'NL - mètres carrés',
    },
    'square-kilometers': {
        fr: 'kilomètres carrés',
        nl: 'NL - kilomètres carrés',
    },
    hectares: {
        fr: 'hectares',
        nl: 'NL - hectares',
    },
    ares: {
        fr: 'ares',
        nl: 'NL - ares',
    },
} satisfies I18nRegistry;

packages/common/src/lib/widgets/measure/surface/MeasureSurface.svelte

packages/common/src/lib/widgets/measure/surface/MeasureSurface.svelte
<script lang="ts">
    import { initGraphicMapServiceConfiguration } from '$lib/api/managers/configuration';
    import { getI18n } from '$lib/api/managers/i18n';
    import { getMapManager } from '$lib/api/map';
    import { onDestroy } from 'svelte';
    import DisplayMeasure from '$lib/widgets/measure/DisplayMeasure.svelte';
    import { getOffset } from '$lib/widgets/measure/display-mesure.utils';
    import type { MeasureSurfaceProps } from './measure-surface.declaration';
    import MouseTooltip from '$lib/components/tooltip/MouseTooltip.svelte';
    import type { ApiFeature } from '$lib/api/feature';


    const { fullConfig }: MeasureSurfaceProps = $props();
    const { config } = fullConfig;
    const i18n = getI18n(fullConfig.i18n);


    const mapManager = getMapManager();
    const drawFactory = mapManager.tools.draw;
    const measurementTool = mapManager.tools.measurement;


    const serviceIdentifier = 'MeasurePolygonLayerId';
    const graphicMapService = mapManager.addGraphicMapService(
        initGraphicMapServiceConfiguration({
            label: i18n('layer-name'),
            id: serviceIdentifier,
            toc: {
                visible: false,
            },
        }),
    );
    const drawTool = drawFactory.create({ layer: graphicMapService });


    const fixed = 2;
    const maxFixed = 2;


    let metersArea = $state(0);
    let metersPerimeter = $state(0);


    let aresArea = $derived(metersArea / 100);
    const aresAreaOffset = $derived.by(() => getOffset(metersArea, aresArea));


    let hectaresArea = $derived(metersArea / 10000);
    const hectaresAreaOffset = $derived.by(() => getOffset(metersArea, hectaresArea));


    let kilometersArea = $derived(metersArea / 1000000);
    let kilometersPerimeter = $derived(metersPerimeter / 1000);
    const kilometersPerimeterOffset = $derived.by(() => getOffset(metersPerimeter, kilometersPerimeter));
    const kilometersAreaOffset = $derived.by(() => getOffset(metersArea, kilometersArea));


    let currentDraw: ApiFeature | undefined;


    function startDraw() {
        drawTool.create({
            type: 'polygon',
            onDrawUpdate: (evt) => {
                metersArea = measurementTool.getArea(evt, 'm');
                metersPerimeter = measurementTool.getLength(evt, 'm');
            },
            onDrawComplete: (evt) => {
                if (currentDraw) {
                    drawTool.delete(currentDraw);
                }
                currentDraw = evt;
                startDraw();
            },
            symbol: config.symbol,
        });
    }


    startDraw();


    onDestroy(() => {
        drawTool.destroy();
        mapManager.removeMapService(serviceIdentifier);
    });
</script>


<div class="gv-p-4">
    <p class="gv-text-xl gv-font-extrabold gv-mb-3 gv-border-b gv-border-grey-200">{i18n('title')}</p>
    <p class="gv-font-semibold gv-mb-1">{i18n('surface')}</p>
    <DisplayMeasure
        value={kilometersArea}
        offset={kilometersAreaOffset}
        {fixed}
        {maxFixed}
        unitLabel={i18n('square-kilometers')}
    ></DisplayMeasure>
    <DisplayMeasure value={hectaresArea} offset={hectaresAreaOffset} {fixed} {maxFixed} unitLabel={i18n('hectares')}
    ></DisplayMeasure>
    <DisplayMeasure value={aresArea} offset={aresAreaOffset} {fixed} {maxFixed} unitLabel={i18n('ares')}
    ></DisplayMeasure>
    <DisplayMeasure value={metersArea} {fixed} {maxFixed} unitLabel={i18n('square-meters')}></DisplayMeasure>


    <p class="gv-font-semibold gv-mt-3 gv-mb-1">{i18n('perimeter')}</p>
    <DisplayMeasure value={metersPerimeter} {fixed} {maxFixed} unitLabel={i18n('meters')}></DisplayMeasure>
    <DisplayMeasure
        value={kilometersPerimeter}
        {fixed}
        offset={kilometersPerimeterOffset}
        {maxFixed}
        unitLabel={i18n('kilometers')}
    ></DisplayMeasure>


    <p class="gv-text-grey-500 gv-mt-3">
        {@html i18n('disclaimer')}
    </p>
</div>


<MouseTooltip visible={drawTool.isDrawing}>
    <span class="gv-text-sm">{i18n('common.draw-double-click-to-continue')}</span>
</MouseTooltip>

Aller plus loin