Линейка

Вы можете добавлять линейку на карту с помощью плагина Ruler (Линейка).

Линейка работает в двух режимах:

• Полилиния: для измерения расстояний между произвольными точками на карте.
• Полигон: для измерения площадей и периметров многоугольников на карте.

Начало работы

Чтобы добавить линейку на карту, создайте экземпляр 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' });

Примеры использования

Режим полилинии

Чтобы поставить точки, кликайте по карте.

Вы можете строить ломаные линии из нескольких точек, а также добавлять точки на уже нарисованную линию.

Рядом с каждой точкой отображается расстояние от стартовой точки.

Режим полигона

Чтобы поставить точки, кликайте по карте.

Вы можете строить многоугольники (полигоны) из нескольких точек, а также добавлять точки на уже нарисованные стороны полигона.

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

Использование UI-элемента

Вы можете добавить на карту UI-элемент управления RulerControl, чтобы включать и отключать режим линейки.

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

Чтобы добавить UI-элемент на карту, создайте экземпляр 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],
]);

Пример использования

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