Интерфейсы

IHandler
- Методы
ILayer
IControl
- Методы
- Пример реализации элемента управления

IHandler

Интерфейс, который реализуется обработчиками взаимодействия.

Методы

Метод	Возвращает	Описание
`enable()`	-	Включает обработчик
`disable()`	-	Отключает обработчик.
`enabled()`	`Boolean`	Возвращает `true` если обработчик включен.

ILayer

Описывает объект, который привязан к определенному местоположению (или набору местоположений) на карте. Реализуется такими объектами, как тайловые слои, маркеры, балуны, слои, векторные слои и группы.

Методы

Метод	Возвращает	Описание
`onAdd( <Map> map )`	-	Должен содержать код, который создает DOM элементы слоя, добавляет их на панели карты и подписывает обработчики на все необходимые события карты. Вызывается при `map.addLayer(layer)`.
`onRemove( <Map> map )`	-	Должен содержать код очистки, который удаляет элементы слоя и отписывает ранее добавленные обработчики событий. Вызывается при `map.removeLayer(layer)`.

Реализация собственных слоев

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

Еще одним событием, которое часто используется при разработке слоев является moveend, оно вызывается после любых движений карты (перемещение, изменение масштаба и т.п.).

Еще одна важная особенность, которую необходимо знать — для всех DOM элементов, которые должны быть скрыты во время анимации изменения масштаба карты необходимо добавить класс leaflet-zoom-hide.

Пример реализации слоя

Пример реализации слоя:

var MyCustomLayer = DG.Class.extend({

    initialize: function (latlng) {
        // сохраняет позицию или другие опции конструктора
        this._latlng = latlng;
    },

    onAdd: function (map) {
        this._map = map;

        // создает DOM элемент и добавляет его на панели карты
        this._el = DG.DomUtil.create('div', 'my-custom-layer leaflet-zoom-hide');
        map.getPanes().overlayPane.appendChild(this._el);

        // подписка на событие viewreset для обновления позиции слоя
        map.on('viewreset', this._reset, this);
        this._reset();
    },

    onRemove: function (map) {
        // удаляет DOM элементы слоя и отписывает обработчики событий
        map.getPanes().overlayPane.removeChild(this._el);
        map.off('viewreset', this._reset, this);
    },

    _reset: function () {
        // обновляет позицию слоя
        var pos = this._map.latLngToLayerPoint(this._latlng);
        DG.DomUtil.setPosition(this._el, pos);
    }
});

map.addLayer(new MyCustomLayer(latlng));

IControl

Графические элементы управления, которые располагаются в одном из углов карты. Реализуется элементами zoom, attribution, ruler и т.п.

Методы

Каждый элемент управления должен наследоваться от класса Control и иметь следующие методы:

Метод	Возвращает	Описание
`onAdd( <Map> map )`	`HTMLElement`	Должен содержать код, который создает DOM элементы, подписывает обработчики на все необходимые события карты и возвращает элемент содержащий содержимое элемента управления. Вызывается при `map.addControl(control)` или `control.addTo(map)`.
`onRemove( <Map> map )`	-	Опционально, должен содержать код очистки (например, отписывать обработчики событий). Вызывается при `map.removeControl(control)` или `control.removeFrom(map)`. DOM контейнер элемента управления удаляется автоматически.

Пример реализации элемента управления

var MyControl = DG.Control.extend({
    options: {
        position: 'topright'
    },

    onAdd: function (map) {
        // создает контейнер элемента управления с определенным именем класса
        var container = DG.DomUtil.create('div', 'my-custom-control');

        // ... инициализирует другие DOM элементы, добавляет обработчики событий и т.п.

        return container;
    }
});

map.addControl(new MyControl());

Если вы задаете собственный конструктор элемента управления, тогда необходимо корректно обработать опции:

var MyControl = DG.Control.extend({
    initialize: function (foo, options) {
        // ...
        DG.Util.setOptions(this, options);
    },
    // ...
});

Это позволит передавать такие опции, как, например, position при создании объекта элемента управления:

map.addControl(new MyControl('bar', {position: 'bottomleft'}));