vector-layers

В данном разделе рассматривается работа с векторными слоями, представляющие собой геометрические объекты на карте: окружности, ломаные линии, многоугольники.

DG.Path

Абстрактный класс, содержащий базовые опции и константы векторных слоев (Polygon, Polyline, Circle). Не используйте этот класс напрямую. Расширяет Layer.

Опции

Опция	Тип	По умолчанию	Описание
`stroke`	`Boolean`	`true`	Нужно ли рисовать границу фигуры. Установите значение в `false`, чтобы отключить границы многоугольников или окружностей.
`color`	`String`	`'#3388ff'`	Цвет границы.
`weight`	`Number`	`3`	Ширина границы в пикселях.
`opacity`	`Number`	`1.0`	Прозрачность границы.
`lineCap`	`String`	`'round'`	Строка, которая определяет вид границы, на концах ломаной.
`lineJoin`	`String`	`'round'`	Строка, которая определяет вид границы, на изгибах ломаной.
`dashArray`	`String`	`null`	Строка шаблона границы. Не работает на canvas слоях (например, Android 2).
`dashOffset`	`String`	`null`	Строка, которая определяет расстояние, через которое начинается штриховка. Не работает на canvas слоях (например, Android 2).
`fill`	`Boolean`	`depends`	Заполнять ли фигуру цветом. Установите значение в `false`, чтобы отключить заполнение многоугольников или окружностей.
`fillColor`	`String`	`*`	Цвет заливки. Цвет по умолчанию определяется опцией `color`.
`fillOpacity`	`Number`	`0.2`	Прозрачность заливки.
`fillRule`	`String`	`'evenodd'`	Строка, которая задает, как определяется внутренняя область фигуры.
`interactive`	`Boolean`	`true`	Если `false`, векторный слой не будет генерировать события мыши и будет вести себя, как часть нижележащего слоя карты.
`renderer`	`Renderer`		Использовать этот экземпляр `Renderer` для данного векторного объекта. Переопределяет renderer карты, установленный по умолчанию.
`className`	`string`	`null`	Добавляет класс в соотвествующий атрибут элемента (только для SVG).

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапа, унаследованные от Layer

Методы

Метод	Возвращает	Описание
`redraw()`	`this`	Перерисовывает слой. Удобно при изменении его координат.
`setStyle( <Path options> style)`	`this`	Изменяет внешний вид объекта с помощью опций класса Path.
`bringToFront()`	`this`	Позиционирует слой поверх всех остальных.
`bringToBack()`	`this`	Позиционирует слой под остальными.

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

DG.Polyline

Класс для отрисовки ломаных линий на карте. Расширяет Path.

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

// создает ломаную красного цвета из массива точек LatLng
var latlngs = [
    [-122.68, 45.51],
    [-122.43, 37.77],
    [-118.2, 34.04],
];
var polyline = DG.polyline(latlngs, { color: 'red' }).addTo(map);
// увеличиваем масштаб так, чтобы было видно всю ломаную
map.fitBounds(polyline.getBounds());

Вы также можете передать многомерный массиив, который представляет собой фигуру MultiPolyline:

// создает красную ломаную из массива массивов точек LatLng
var latlngs = [
    [
        [-122.68, 45.51],
        [-122.43, 37.77],
        [-118.2, 34.04],
    ],
    [
        [-73.91, 40.78],
        [-87.62, 41.83],
        [-96.72, 32.76],
    ],
];

Создание

Конструктор Использование

DG.polyline( <LatLng[]> latlngs, <Path options> options?) Создает объект ломаной по переданному массиву географических точек и необязательному объекту опций. Вы можете создать объект Polyline, состоящий из множества линий (так называемый MultiPolyline), передав массив массивов географических точек.

Конструктор	Использование
`DG.polyline( <LatLng[]> latlngs, <Path options> options?)`	Создает объект ломаной по переданному массиву географических точек и необязательному объекту опций. Вы можете создать объект `Polyline`, состоящий из множества линий (так называемый `MultiPolyline`), передав массив массивов географических точек.

Опции

Опция	Тип	По умолчанию	Описание
`smoothFactor`	`Number`	`1.0`	Степень упрощения ломаной на каждом уровне масштаба. Большее значение означает более высокую производительность, но худшее качество, меньшее же значение — наоборот.
`noClip`	`Boolean: false`		Отключает отсечение ломаной.

Опции, унаследованные от Path

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапов, унаследованные Layer

Методы

Метод	Возвращает	Описание
`toGeoJSON()`	`Object`	Возвращает GeoJSON представление ломаной (GeoJSON LineString или `MultiLineString`).
`getLatLngs()`	`LatLng[]`	Возвращает массив точек объекта или массив массивов точек, в случае мультиломаной.
`setLatLngs(<LatLng[]> latlngs)`	`this`	Заменяет все точки ломаной данными из переданного массива.
`isEmpty()`	`Boolean`	Возвращает `true`, если у Polyline нет точек LatLngs.
`getCenter()`	`LatLng`	Возвращает центр (centroid) ломаной.
`getBounds()`	`LatLngBounds`	Возвращает границы ломаной.
`addLatLng( <LatLng> latlng) <LatLng[]> latlngs?,`	`this`	Добавляет точку в ломаную. По умолчанию, добавляет точку в первое звено списка ломаных в случае мультиломаной. Это поведение может быть переопределено передачей определенного звена, как массива элементов LatLng (к которому вы могли получить доступ ранее, с помощью метода getlatlngs).

Методы, унаследованные от Path

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

DG.Polygon

Класс для отрисовки многоугольников на карте. Расширяет Polyline.

Обратите внимание на то, что среди точек, которые передаются для создания многоугольника, не должно быть дополнительной точки, совпадающей с первой - такие точки лучше предварительно отфильтровать.

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

// создает красный многоугольник из массива точек LatLng
var latlngs = [
    [-111.03, 41],
    [-111.04, 45],
    [-104.05, 45],
    [-104.05, 41],
];
var polygon = DG.polygon(latlngs, { color: 'red' }).addTo(map);

// увеличивает масштаб карты до максимального значения, при котором виден весь многоугольник
map.fitBounds(polygon.getBounds());

Возможно также создать многоугольник с дырами, передав массив массивов latlngs, первый latlngs массив отвечает за внешние границы, остальные описывают области внутри.

var latlngs = [
    [
        [-111.03, 41],
        [-111.04, 45],
        [-104.05, 45],
        [-104.05, 41],
    ], // внешняя граница
    [
        [-108.58, 37.29],
        [-108.58, 40.71],
        [-102.5, 40.71],
        [-102.5, 37.29],
    ], // дыра
];

Также, вы можете передать многомерный массив, который представляет собой мульти-многоугольник (MultiPolygon).

var latlngs = [
    [
        // первый многоугольник
        [
            [-111.03, 41],
            [-111.04, 45],
            [-104.05, 45],
            [-104.05, 41],
        ], // внешняя граница
        [
            [-108.58, 37.29],
            [-108.58, 40.71],
            [-102.5, 40.71],
            [-102.5, 37.29],
        ], // дыра
    ],
    [
        // второй многоугольник
        [
            [-109.05, 37],
            [-109.03, 41],
            [-102.05, 41],
            [-102.04, 37],
            [-109.05, 38],
        ],
    ],
];

Создание

Конструктор	Описание
`DG.polygon( <LatLng[]> latlngs, <Polyline options> options?)`

Опции

Опции, унаследованные от Polyline

Опции, унаследованные от Path

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапов, унаследованные Layer

Методы

Методы, унаследованные от Polyline

Методы, унаследованные от Path

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

DG.Rectangle

Класс для отрисовки прямоугольников на карте. Расширяет Polygon.

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

// создаем географические границы прямоугольника
var bounds = [
    [54.559322, -5.767822],
    [56.1210604, -3.02124],
];

// создаем оранжевый прямоугольник
DG.rectangle(bounds, { color: '#ff7800', weight: 1 }).addTo(map);

// подстраиваем центр карты и масштаб так, чтобы прямоугольник было видно
map.fitBounds(bounds);

Создание

Конструктор	Описание
`DG.rectangle( <LatLngBounds> latLngBounds, <Polyline options> options?)`

Опции

Опции, унаследованные от Polyline

Опции, унаследованные от Path

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапов, унаследованные Layer

Методы

Метод	Возвращает	Описание
`setBounds( <LatLngBounds> latLngBounds)`	`this`	Перерисовывает прямоугольник с новыми границами.

Методы, унаследованные от Polygon

Методы, унаследованные от Path

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

DG.Circle

Класс для отрисовки окружности на карте. Расширяет Path. Это аппроксимация, которая начинает отличаться от настоящей окружности ближе к полюсам (из-за искажений проекции).

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

DG.circle([50.5, 30.5], 200).addTo(map);

Создние

Конструктор	Описание
`DG.circle( <LatLng> latlng, <Path options> options?)`	Создает объект круга по переданной географической точке и объекту опций, в котором содежится радиус круга.
`DG.circle( <LatLng> latlng, <Number> radius, <Path options> options?)`	Устаревший способ создания круга, только для совместимости со старым кодом. Не используйте его в своих новых приложениях и плагинах.

Опции

Опция	Тип	По умолчанию	Описание
`radius`	`Number`		Радиус круга в метрах.

Опции, унаследованные от Path

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапов, унаследованные Layer

Методы

Метод	Возвращает	Описание
`setRadius( <Number> radius)`	`this`	Устанавливает радиус окружности в метрах
`getRadius()`	`Number`	Возвращает текущий радиус окружности в метрах
`getBounds()`	`LatLngBounds`	Возвращает `LatLngBounds` объекта.

Методы, унаследованные от CircleMarker

Методы, унаследованные от Path

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

DG.CircleMarker

Окружность фиксированного размера с радиусом указанным в пикселях. Расширяет Path.

Создание

Конструктор	Описание
`DG.circleMarker( <LatLng> latlng, options)`	Создает объект круглого маркера по переданной географической точке и необязательному объекту опций.

Опции

Опция	Тип	По умолчанию	Описание
`radius`	`Number`	`10`	Радиус маркера в пикселях

Опции, унаследованные от Path

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапа, унаследованные от Layer

Методы

Метод	Возвращает	Описание
`toGeoJSON()`	`Object`	Возвращает GeoJSON представление круглого маркера (GeoJSON Point).
`setLatLng( <LatLng> latLng)`	`this`	Устанавливает географическую позицию круглого маркера.
`getLatLng()`	`LatLng`	Возвращает текущую географическую позицию круглого маркера.
`setRadius(<Number> radius)`	`this`	Устанавливает радиус окружности, значение в пикселях.
`getRadius()`	`Number`	Возвращает текущее значение радиуса окружности.

Методы, унаследованные от Path

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

DG.Svg

Данный класс позволяет отображать векторные слои с помощью SVG. Наследуется от Renderer.

Из-за технических ограничений, SVG доступен не во всех браузерах (например, Android версий 2.x и 3.x не поддерживает SVG).

SVG не доступен в IE8, но в этом браузере есть поддержка устаревшей технологии VML, и SVG renderer переключится на использование VML, в случае работы под IE8. Поддержка VML в библиотеке существует только для обратной совместимости со старой версией Internet Explorer.

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

Использование SVG по умолчанию для всех векторных объектов на карте:

var map = DG.map("map", {
    renderer: DG.svg();
    });

Использование SVG rendrer с дополнительными отступами для определенных векторных объектов:

var map = DG.map('map');
var myRenderer = DG.svg({ padding: 0.5 });
var line = DG.polyline(coordinates, { renderer: myRenderer });
var circle = DG.circle(center, { renderer: myRenderer });

Создание

Конструктор	Описание
`DG.svg(<SVG options> options?)`	Создает SVG renderer, используя указанные опции.

Опции

Опции, унаследованные от Renderer

События

События, унаследованные от Layer

События попапа, унаследованные от Layer

Методы

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

Функции

Есть несколько статических функций, которые могут быть вызваны без создания объекта DG.SVG:

Функция	Возвращает	Описание
`create(<String> name)`	`SVGElement`	Возвращает экземпляр SVGElement, соответствуйщий имени класса, переданному как аргумент. Например, использование 'line' вернет экземпляр SVGLineElement.
`pointsToPath( <[]> rings, <Boolean> closed)`	`String`	Генерирует строку SVG path для множества звеньев, каждое звено превращается в "M..L..L.."-инструкции

DG.Canvas

Позволяет отрисовывать векторные слои с помощью canvas. Наследуется от Renderer. В виду технических ограничений, Canvas доступен не во всех браузерах (например, в IE8) и пересекающиеся объекты могут отображаться некорректно, в некоторых крайних случаях.

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

Использование Canvas по умолчанию для всех векторных объектов на карте:

var map = DG.map('map', {
    renderer: DG.canvas();
    });

Использование Canvas с дополнительными отступами, для определенных векторных объектов:

var map = DG.map('map');
var myRenderer = DG.canvas({ padding: 0.5 });
var line = DG.polyline(coordinates, { renderer: myRenderer });
var circle = DG.circle(center, { renderer: myRenderer });

Создание Canvas

Конструктор	Описание
`DG.canvas(<Canvas options> options?)`	Создает Canvas renderer, используя переданные опции.

Опции

Опции, унаследованные от Renderer

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапа, унаследованные от Layer

Методы

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

DG.Path​

Опции​

События​

Методы​

DG.Polyline​

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

Создание​

Опции​

События​

Методы​

DG.Polygon​

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

Создание​

Опции​

События​

Методы​

DG.Rectangle​

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

Создание​

Опции​

События​

Методы​

DG.Circle​

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

Создние​

Опции​

События​

Методы​

DG.CircleMarker​

Создание​

Опции​

События​

Методы​

DG.Svg​

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

Создание​

Опции​

События​

Методы​

Функции​

DG.Canvas​

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

Создание Canvas​

Опции​

События​

Методы​

DG.Path

Опции

События

Методы

DG.Polyline

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

Создание

Опции

События

Методы

DG.Polygon

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

Создание

Опции

События

Методы

DG.Rectangle

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

Создание

Опции

События

Методы

DG.Circle

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

Создние

Опции

События

Методы

DG.CircleMarker

Создание

Опции

События

Методы

DG.Svg

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

Создание

Опции

События

Методы

Функции

DG.Canvas

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

Создание Canvas

Опции

События

Методы