OpenLayers: OpenLayers.Control.Panel

Решенные задачи, первая запись - описание решения.
Ответить
Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3376
Зарегистрирован: 11 апр 2008, 21:09
Репутация: 529
Ваше звание: Author
Контактная информация:

OpenLayers: OpenLayers.Control.Panel

Сообщение Denis Rykov » 05 окт 2011, 20:18

Введение

OpenLayers.Control.Panel представляет собой контрол, являющийся контейнером для других контролов.
Примером его использования являются контролы PanPanel и ZoomPanel, которые фактически являются всего лишь обертками над другими контролами.

Внутри панели каждый контрол представлен своей иконкой, внешний вид которой может быть настроен произвольным образом. При нажатии на иконку вызывается метод activateControl контрола Panel, активирующий соответствующий контрол.

Каждый контрол внутри панели может быть одного из следующих типов:

OpenLayers.Control.TYPE_BUTTON: данный тип соответствует обычной кнопке. При нажатии на кнопку вызывается метод activateControl внутри которого проверяется тип контрола и если это тип OpenLayers.Control.TYPE_BUTTON, то вызывается метод trigger этого контрола.

OpenLayers.Control.TYPE_TOGGLE: контрол данного типа активируется при нажатии на иконке и деактивируется при повторном нажатии.

OpenLayers.Control.TYPE_TOOL: при нажатии на иконке данного контрола он активируется, а остальные контролы панели отключаются.

Практическое использование панелей

Рассмотрим пример, показывающий как можно использовать панели. Предположим, что мы хотим добавить на карту кнопки, при нажатии на которые будет происходить уменьшение, увеличение масштаба и зум на полный охват. Стандартное решение - использовать контрол ZoomPanel, представляющий собой ни что иное как панель в которую включены три контрола: ZoomIn, ZoomToMaxExtent, ZoomOut. Все эти три контрола типа OpenLayers.Control.TYPE_BUTTON. Покажем как не используя стандартный контрл ZoomPanel, а манипулируя только тремя вышеназванными контролами решить поставленную задачу.

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

Прежде всего нужно определиться, где будет располагаться панель - в div-е карты или в каком-то другом существующем div-е. Рассмотрим оба варианта.

Размещение панели в существующем div-е
Рассмотрим пошагово операции, необходимые для размещения контрола в существующем div-е.

1 Создание панели
Допустим у нас есть div класса panel, тогда чтобы поместить в него панель пишем:

Код: Выделить всё

outside_panel = new OpenLayers.Control.Panel({div: $('panel')}); 
2 Добавление панели в объект карты

Код: Выделить всё

map.addControl(outside_panel); 
3 Создание контролов

Код: Выделить всё

var zoom_in_outside = new OpenLayers.Control.ZoomIn();
var zoom_max_outside = new OpenLayers.Control.ZoomToMaxExtent({displayClass: 'myZoomToMaxOutside'});
var zoom_out_outside = new OpenLayers.Control.ZoomOut({displayClass: 'myZoomOutOutside'}); 
Если для контрола указано свойство displayClass, то его можно использовать для настройки внешнего вида контрола в CSS, если displayClass не указан, то используется стандартный подход к созданию имени класса контрола: 'olControl[ИмяКонтрола]', то есть в нашем случае класс для контрола ZoomIn будет иметь имя olControlZoomIn.

4 Добавление контролов в панель

Код: Выделить всё

outside_panel.addControls([zoom_in_outside, zoom_max_outside, zoom_out_outside]); 
Метод addControls создаёт div-ы для кнопок и добавляет контролы в массив map.controls, кроме того к именам класов неактивных контролов (а используемые нами контролы по умолчанию являются неактивными) добавляется строка 'ItemInactive'.

5 Настройка стилей CSS

Код: Выделить всё

#panel {
width: 16px;
height: 48px;
border: 1px solid #dddddd;
cursor: pointer;
}

#panel .olControlZoomInItemInactive {
background:url(plus.gif) no-repeat;
width: 16px;
height: 16px;
}

#panel .myZoomToMaxOutsideItemInactive {
background:url(max.gif) no-repeat;
width: 16px;
height: 16px;
}

#panel .myZoomOutOutsideItemInactive {
background:url(minus.gif) no-repeat;
width: 16px;
height: 16px;
}


Размещение панели внутри div-а карты

1 Создание панели

Код: Выделить всё

inside_panel = new OpenLayers.Control.Panel({displayClass: 'insidePanel'}); 
Если не указывать свойство displayClass, то имя класса панели будет olControlPanel, а в нашем примере - insidePanel.

2 Добавление панели в объект карты

Код: Выделить всё

map.addControl(inside_panel); 
3 Создание контролов

Код: Выделить всё

var zoom_in_inside = new OpenLayers.Control.ZoomIn();
var zoom_max_inside = new OpenLayers.Control.ZoomToMaxExtent({displayClass: 'myZoomToMaxInside'});
var zoom_out_inside = new OpenLayers.Control.ZoomOut({displayClass: 'myZoomOutInside'}); 
4 Добавление контролов в панель

Код: Выделить всё

inside_panel.addControls([zoom_in_inside, zoom_max_inside, zoom_out_inside]); 
5 Настройка стилей CSS

Код: Выделить всё

.insidePanel {
width: 18px;
height: 54px;
border: 1px solid #dddddd;
margin-top: 100px;
cursor: pointer;
}

.insidePanel .olControlZoomInItemInactive {
background:url(http://dev.openlayers.org/releases/Open ... s-mini.png) no-repeat;
width: 18px;
height: 18px;
}

.insidePanel .myZoomToMaxInsideItemInactive {
background:url(http://dev.openlayers.org/releases/Open ... d-mini.png) no-repeat;
width: 18px;
height: 18px;
}

.insidePanel .myZoomOutInsideItemInactive {
background:url(http://dev.openlayers.org/releases/Open ... s-mini.png) no-repeat;
width: 18px;
height: 18px;
}


Онлайн пример доступен тут.
Вложения
olControlPanel.png
Результат
olControlPanel.png (515.08 КБ) 11195 просмотров
Spatial is now, more than ever, just another column- The Geometry Column.

Ответить

Вернуться в «Рецепты»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 4 гостя