Векторные слои
В данном разделе рассматривается работа с векторными слоями, представляющие собой геометрические объекты на карте: окружности, ломаные линии, многоугольники.
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(
|
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(
|
Создает объект ломаной по переданному массиву географических точек и необязательному объекту опций.
Вы можете создать объект Polyline , состоящий из
множества линий (так называемый MultiPolyline ), передав массив массивов
географических точек. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
smoothFactor |
Number
| 1.0 |
Степень упрощения ломаной на каждом уровне масштаба. Большее значение означает более высокую производительность, но худшее качество, меньшее же значение — наоборот. |
noClip |
Boolean: false
|
|
Отключает отсечение ломаной. |
Опции, унаследованные от Path
Опции, унаследованные от Layer
События
События, унаследованные от Layer
События попапов, унаследованные Layer
Методы
Метод | Возвращает | Описание |
---|---|---|
toGeoJSON() |
Object |
Возвращает GeoJSON
представление ломаной (GeoJSON LineString или MultiLineString ). |
getLatLngs() |
LatLng[] |
Возвращает массив точек объекта или массив массивов точек, в случае мультиломаной. |
setLatLngs( |
this |
Заменяет все точки ломаной данными из переданного массива. |
isEmpty() |
Boolean |
Возвращает true , если у Polyline нет точек LatLngs. |
getCenter() |
LatLng |
Возвращает центр (centroid) ломаной. |
getBounds() |
LatLngBounds |
Возвращает границы ломаной. |
addLatLng(
|
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(
|
Опции
Опции, унаследованные от 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(
|
Опции
Опции, унаследованные от Polyline
Опции, унаследованные от Path
Опции, унаследованные от Layer
События
События, унаследованные от Layer
События попапов, унаследованные Layer
Методы
Метод | Возвращает | Описание |
---|---|---|
setBounds(
|
this |
Перерисовывает прямоугольник с новыми границами. |
Методы, унаследованные от Polygon
Методы, унаследованные от Path
Методы попапа, унаследованные от Layer
Методы, унаследованные от Layer
Методы, унаследованные от Evented
DG.Circle
Класс для отрисовки окружности на карте. Расширяет Path. Это аппроксимация, которая начинает отличаться от настоящей окружности ближе к полюсам (из-за искажений проекции).
Пример использование
DG.circle([50.5, 30.5], 200).addTo(map);
Создние
Конструктор | Описание |
---|---|
DG.circle(
|
Создает объект круга по переданной географической точке и объекту опций, в котором содежится радиус круга. |
DG.circle(
|
Устаревший способ создания круга, только для совместимости со старым кодом. Не используйте его в своих новых приложениях и плагинах. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
radius |
Number
|
|
Радиус круга в метрах. |
Опции, унаследованные от Path
Опции, унаследованные от Layer
События
События, унаследованные от Layer
События попапов, унаследованные Layer
Методы
Метод | Возвращает | Описание |
---|---|---|
setRadius(
|
this |
Устанавливает радиус окружности в метрах |
getRadius() |
Number |
Возвращает текущий радиус окружности в метрах |
getBounds() |
LatLngBounds |
Возвращает LatLngBounds
объекта. |
Методы, унаследованные от CircleMarker
Методы, унаследованные от Path
Методы попапа, унаследованные от Layer
Методы, унаследованные от Layer
Методы, унаследованные от Evented
DG.CircleMarker
Окружность фиксированного размера с радиусом указанным в пикселях. Расширяет Path.
Создание
Конструктор | Описание |
---|---|
DG.circleMarker(
|
Создает объект круглого маркера по переданной географической точке и необязательному объекту опций. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
radius |
Number |
10 |
Радиус маркера в пикселях |
Опции, унаследованные от Path
Опции, унаследованные от Layer
События
События, унаследованные от Layer
События попапа, унаследованные от Layer
Методы
Метод | Возвращает | Описание |
---|---|---|
toGeoJSON() |
Object |
Возвращает GeoJSON представление круглого маркера (GeoJSON Point). |
setLatLng(
|
this |
Устанавливает географическую позицию круглого маркера. |
getLatLng() |
LatLng |
Возвращает текущую географическую позицию круглого маркера. |
setRadius( |
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 renderer, используя указанные опции. |
Опции
Опции, унаследованные от Renderer
События
События, унаследованные от Layer
События попапа, унаследованные от Layer
Методы
Методы попапа, унаследованные от Layer
Методы, унаследованные от Layer
Методы, унаследованные от Evented
Функции
Есть несколько статических функций, которые могут быть вызваны без создания объекта DG.SVG:
Функция | Возвращает | Описание |
---|---|---|
create( |
SVGElement |
Возвращает экземпляр SVGElement, соответствуйщий имени класса, переданному как аргумент. Например, использование 'line' вернет экземпляр SVGLineElement. |
pointsToPath(
|
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 renderer, используя переданные опции. |
Опции
Опции, унаследованные от Renderer
Опции, унаследованные от Layer
События
События, унаследованные от Layer
События попапа, унаследованные от Layer
Методы
Методы попапа, унаследованные от Layer
Методы, унаследованные от Layer
Методы, унаследованные от Evented