## Векторные слои В данном разделе рассматривается работа с векторными слоями, представляющие собой геометрические объекты на карте: окружности, ломаные линии, многоугольники. {toc} ### 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), передав массив массивов географических точек.
#### Опции
Опция Тип По умолчанию Описание
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.50,40.71],[-102.50,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.50,40.71],[-102.50,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.021240]]; // создаем оранжевый прямоугольник 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