Векторные слои

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

• DG.Path
  • Опции
  • События
  • Методы
• DG.Polyline
  • Пример использования
  • Создание
  • Опции
  • События
  • Методы
• DG.Polygon
  • Пример использования
  • Создание
  • Опции
  • События
  • Методы
• DG.Rectangle
  • Пример использования
  • Создание
  • Опции
  • События
  • Методы
• DG.Circle
  • Пример использование
  • Создние
  • Опции
  • События
  • Методы
• DG.CircleMarker
  • Создание
  • Опции
  • События
  • Методы
• DG.Svg
  • Пример использования
  • Создание
  • Опции
  • События
  • Методы
  • Функции
• DG.Canvas
  • Пример использована
  • Создание Canvas
  • Опции
  • События
  • Методы

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