Контролы в OpenLayers

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


Список контролов передается в конструктор карты. Первое, что я заметил в третьей версии OpenLayers — если передать пустой массив контролов (фактически указать, что никаких контролов нам не нужно), то у карты все равно останется способность перемещения мышью и приближения на колесико (в OpenLayers 2 за это поведение отвечал отдельный контрол OpenLayers.Control.Navigation, без которого карта превращалась просто в статическую картинку).

Если в конструктор карты не передать никаких контролов, OpenLayers создаст следующие контролы по умолчанию:

  • ol.control.Zoom
  • ol.control.Rotate
  • ol.control.Attribution

ol.control.Zoom добавляет на карту две кнопки, «+» для приближения и «-» для отдаления. ol.control.Rotate добавляет кнопку, которая сбрасывает поворот карты на ноль. Кнопка появляется только в том случае, когда поворот карты отличается от нулевого значения. Попробуйте выполнить в консоли браузера команду map.getView().setRotation(45), при этом карта повернется на 45 градусов и в верхнем правом углу появится стрелка. ol.control.Attribution отображается на карте в виде буквы i и содержит ссылки на правообладателей и лицензии (с возможностью свернуть всю строчку в маленькую иконку).

Если из трех контролов по умолчанию нам не будет нужен ol.control.Rotate, можно задать список контролов в конструкторе карты:


    var map = new ol.Map({
        controls: [new ol.control.Zoom(), new ol.control.Attribution()],
        target: 'map'
    });

Для того, чтобы оставить контролы по умолчанию и добавить на карту дополнительные, не обязательно перечислять все контролы по умолчанию. Для этого у OpenLayers есть метод ol.control.defaults(), который вернет три вышеописанных контрола. Для того, чтобы добавить еще один контрол (пусть это будет ZoomSlider), воспользуемся кодом следующего вида:


    var map = new ol.Map({
        controls: ol.control.defaults().extend([ new ol.control.ZoomSlider() ]),
        target: 'map'
    });

Добавим еще пачку контролов:


    var map = new ol.Map({
        controls: ol.control.defaults().extend([
            new ol.control.ZoomSlider(),
            new ol.control.MousePosition(),
            new ol.control.OverviewMap(),
            new ol.control.ScaleLine()
        ]),
        target: 'map'
    });

У добавленных контролов следующее предназначение:

  • ol.control.ZoomSlider отображает полоску масштабов с указанием текущего уровня
  • ol.control.MousePosition показывает координаты текущего положения мыши
  • ol.control.OverviewMap показывает уменьшенную обзорную карту
  • ol.control.ScaleLine отображает текущий масштаб

Как видно, мы получили не совсем то, что хотели. Контролы наложились друг на друга, координаты отображаются без фона и не всегда хорошо различимы. Для того, чтобы сместить контролы и задать им фон (и другие свойства CSS), в OpenLayers предусмотрены CSS-классы, которые можно переопределить. Например, для контрола MousePosition за отображение отвечает класс ol-mouse-position, что видно на странице документации. С настройки этого контрола и начнем.

Сейчас контрол показывает координаты в метрах, эти единицы используются редко и к тому же занимают много места. Поэтому первым делом, до настройки стилей, зададим параметры самому контролу:


    var mousePositionControl = new ol.control.MousePosition( {
        // используется градусная проекция
        projection: 'EPSG:4326',
        // переопределяем функцию вывода координат
        coordinateFormat: function(coordinate) {
            // сначала широта, потом долгота и ограничиваем до 5 знаков после запятой
            return ol.coordinate.format(coordinate, '{y}, {x}', 5);
        }
    } );

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


    .ol-mouse-position {
        background-color: rgba(0, 60, 136, .4);
        border-radius: 4px;
        color: #eee;
        padding: 1px 5px;
    }

Теперь расположим остальные контролы таким образом, чтобы они не мешали друг другу и еще зададим заливку поярче для полосы масштабов:


    /* поднимаем копирайты повыше */
    .ol-attribution {
        bottom: 2em;
    }
    
    
    /* контрол масштаба сдвигаем вправо */
    .ol-scale-line {
        left: auto;
        right: 8px;
    }
    
    
    /* полоску масштабов заливаем более заметным цветом */
    .ol-zoomslider {
        background-color: rgba(0, 60, 136, .4);
    }
    
    .ol-zoomslider:hover {
        background-color: rgba(0, 60, 136, .6);
    }
    
    .ol-zoomslider button {
        background-color: rgba(255, 255, 255, .8);
    }
    
    .ol-zoomslider button:hover {
        background-color: rgba(255, 255, 255, 1);
    }


Готово! После этих настроек мы пришли к заключительному варианту:



Ссылки:

Контролы в OpenLayers
Метки:    

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *