Skip to content
GeoViewer 5

Source MeasureDistance

Source MeasureDistance

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/distance/measure-distance.declaration.ts

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


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


export type MeasureDistanceProps = WidgetProps<MeasureDistanceConfig>;

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

packages/common/src/lib/widgets/measure/distance/measure-distance.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 { measureDistanceI18n } from '$lib/widgets/measure/distance/measure-distance.i18n';
import { measureI18n } from '$lib/widgets/measure/measure.i18n';
import { z } from 'zod';
import { polylineSymbolSchema } from '$lib/api/symbol';


export const measureDistanceConfigSchema = defineWidgetConfig({
    icon: {
        lucide: 'Ruler',
    },
    title: measureDistanceI18n['tab-title'],
    onActivate: {
        deactivate: {
            classes: ['MeasureSurface', 'AdvancedSearch', 'Report', 'Export', 'Identify', 'AddData', 'Draw'],
        },
    },
    inToolbar: inToolbarSchemaFrom({
        type: 'button',
    }),
    i18n: i18nSchemaFrom({ ...measureI18n, ...measureDistanceI18n }),
    config: z
        .object({
            symbol: polylineSymbolSchema,
        })
        .prefault({}),
});


export type MeasureDistanceConfig = z.infer<typeof measureDistanceConfigSchema>;

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

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


export const measureDistanceI18n = {
    title: {
        fr: 'Mesurer une distance',
        nl: 'NL - Mesurer une distance',
    },
    'tab-title': {
        fr: 'Distance',
        nl: 'NL - Distance',
    },
    'layer-name': {
        fr: 'Mesure par ligne',
        nl: 'NL - Mesure par ligne',
    },
    'full-length': {
        fr: 'Longueur totale',
        nl: 'NL - Longueur totale',
    },
} satisfies I18nRegistry;

packages/common/src/lib/widgets/measure/distance/MeasureDistance.svelte

packages/common/src/lib/widgets/measure/distance/MeasureDistance.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 type { ApiFeature } from '$lib/api/tools';
    import DisplayMeasure from '$lib/widgets/measure/DisplayMeasure.svelte';
    import { getOffset } from '$lib/widgets/measure/display-mesure.utils';
    import type { MeasureDistanceProps } from './measure-distance.declaration';
    import MouseTooltip from '$lib/components/tooltip/MouseTooltip.svelte';


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


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


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


    let metersLength = $state(0);
    let kilometersLength = $derived(metersLength / 1000);
    const kilometersOffset = $derived.by(() => getOffset(metersLength, kilometersLength));


    let currentDraw: ApiFeature | undefined;


    const maxFixed = 2;
    const fixed = 2;


    function startDraw() {
        drawTool.create({
            type: 'polyline',
            onDrawUpdate: (evt) => {
                metersLength = 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('full-length')}</p>


    <DisplayMeasure value={metersLength} {fixed} {maxFixed} unitLabel={i18n('meters')}></DisplayMeasure>
    <DisplayMeasure value={kilometersLength} {fixed} {maxFixed} offset={kilometersOffset} 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