Плагин "Линейка"

Линейка

У линейки есть два режима использования: полилиния и полигон.

Режим полилинии позволяет измерять расстояние, а режим полигона используется, если нужно измерить площадь и периметр многоугольника на карте.

Использование линейки

Чтобы добавить линейку на карту, создайте экземпляр Ruler:

const ruler = new mapgl.Ruler(map, { mode: 'polyline' });

Если вы используете npm:

// Импортируйте либо как модуль ES...
import { Ruler } from '@2gis/mapgl-ruler';
// ... либо как модуль CommonJS
const { Ruler } = require('@2gis/mapgl-ruler');

const ruler = new Ruler(map, { mode: 'polyline' });

Демонстрация линейки в режиме полилинии

Кликните по любому месту карты, чтобы отобразить линейку.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="MapGL API ruler example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .button {
                padding: 4px 10px;
                background: #00a81f;
                border-radius: 4px;
                box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
                border: none;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script src="https://unpkg.com/@2gis/mapgl-ruler@^2/dist/ruler.js"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });

            const ruler = new mapgl.Ruler(map, {
                mode: 'polyline',
                points: [
                    [55.31878, 25.23584],
                    [55.31878, 25.25584],
                    [55.33878, 25.23584],
                ],
            });

            const resetControl = new mapgl.Control(
                map,
                '<button class="button">Reset points</button>',
                {
                    position: 'topLeft',
                },
            );

            resetControl
                .getContainer()
                .querySelector('button')
                .addEventListener('click', function () {
                    ruler.destroy();
                    ruler.enable();
                });
        </script>
    </body>
</html>

Демонстрация линейки в режиме полигона

Кликните по любому месту карты, чтобы отобразить линейку.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="MapGL API ruler example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .button {
                padding: 4px 10px;
                background: #00a81f;
                border-radius: 4px;
                box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
                border: none;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script src="https://unpkg.com/@2gis/mapgl-ruler@^2/dist/ruler.js"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });

            const ruler = new mapgl.Ruler(map, {
                mode: 'polygon',
                points: [
                    [55.31878, 25.23584],
                    [55.31878, 25.25584],
                    [55.33878, 25.23584],
                ],
            });

            const resetControl = new mapgl.Control(
                map,
                '<button class="button">Reset points</button>',
                {
                    position: 'topLeft',
                },
            );

            resetControl
                .getContainer()
                .querySelector('button')
                .addEventListener('click', function () {
                    ruler.destroy();
                    ruler.enable();
                });
        </script>
    </body>
</html>

Элемент управления "Линейка"

Экземпляр RulerControl является оболочкой экземпляра Ruler и расширяет Control.

Он предоставляет элемент управления для включения или отключения линейки.

Использование RulerControl

const rulerControl = new RulerControl(map, { position: 'centerRight', mode: 'polyline' });

Вы можете получить экземпляр Ruler с помощью метода getRuler().

rulerControl.getRuler().setPoints([
    [55.31878, 25.23584],
    [55.31878, 25.25584],
    [55.33878, 25.23584],
]);

Демонстрация RulerControl

Нажмите на кнопку линейки, чтобы включить или отключить ее отображение.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="MapGL API ruler control example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .button {
                padding: 4px 10px;
                background: #00a81f;
                border-radius: 4px;
                box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
                border: none;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script src="https://unpkg.com/@2gis/mapgl-ruler@^2/dist/ruler.js"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });

            let mode = 'polyline';
            let control = new mapgl.RulerControl(map, { position: 'centerRight', mode });
            control.getRuler().setPoints([
                [55.31878, 25.23584],
                [55.31878, 25.25584],
                [55.33878, 25.23584],
            ]);

            const resetControl = new mapgl.Control(
                map,
                '<button class="button">Switch mode</button>',
                {
                    position: 'topLeft',
                },
            );

            resetControl
                .getContainer()
                .querySelector('button')
                .addEventListener('click', function () {
                    const data = control.getRuler().getData();
                    control.destroy();

                    let points = [];
                    switch (data.type) {
                        case 'polyline':
                            points = data.coordinates;
                            break;
                        case 'polygon':
                            points = data.coordinates[0];
                            break;
                    }

                    mode = mode === 'polyline' ? 'polygon' : 'polyline';
                    control = new mapgl.RulerControl(map, { position: 'centerRight', mode });
                    control.getRuler().setPoints(points);
                });
        </script>
    </body>
</html>