OpenLayers: OpenLayers.Control.Button

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

OpenLayers: OpenLayers.Control.Button

Сообщение Denis Rykov » 07 окт 2011, 11:48

В продолжение заметки, посвященной работе с панелями.

Контрол OpenLayer.Control.Button представляет собой довольно простой класс, имеющий, помимо наследуемых от класса OpenLayer.Control свойств и методов, всего лишь одно собственное свойство:

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

type: OpenLayers.Control.TYPE_BUTTON
и один метод:

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

trigger: function() {} 
Данный контрол разработан специально для использования внутри панелей (OpenLayers.Control.Panel) и как показано выше его тип (свойство type) по умолчанию равно константе OpenLayers.Control.TYPE_BUTTON, то есть функция trigger сработает при нажатии кнопки, ассоциированной с контролом. Свойство type можно переопределить, тогда, как следует из кода класса OpenLayers.Control.Panel метод trigger задействован не будет, вместо этого придется "повесить" необходимые функции на события "activate" и "deactivate" контрола OpenLayers.Control.Button. Рассмотрим три способа использования контрола OpenLayer.Control.Button в зависимости от значения свойства OpenLayers.Control.Button.type.

OpenLayers.Control.Button.type = OpenLayers.Control.TYPE_BUTTON

1 Создание панели
Создаём панель и добавляем ее на карту:

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

panel_type1 = new OpenLayers.Control.Panel({displayClass: 'Panel1'});
map.addControl(panel_type1); 
2 Создание кнопки
Создаём кнопку класса OpenLayers.Control.Button и определяем функцию trigger. Тип контрола не указываем, так как необходимый нам тип используется по-умолчанию:

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

aBtn1 = new OpenLayers.Control.Button({displayClass: 'first',
    trigger: function() {alert ('Button of TYPE_BUTTON type is pressed')}
}); 
3 Добавление кнопки в панель

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

panel_type1.addControls([_aBtn1]); 
4 Результат
Результат можно посмотреть здесь.

OpenLayers.Control.Button.type = OpenLayers.Control.TYPE_TOGGLE

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

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

panel_type2 = new OpenLayers.Control.Panel({displayClass: 'Panel2'});
map.addControl(panel_type2); 
2 Создание кнопки
Создаём кнопку класса OpenLayers.Control.Button, указываем тип OpenLayers.Control.TYPE_TOGGLE (можно написать type: 2) и прописываем функции на события 'activate' и 'deactivate'.

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

aBtn2 = new OpenLayers.Control.Button({displayClass: 'first', type: OpenLayers.Control.TYPE_TOGGLE,
    eventListeners: {
        'activate': function(){alert('Control of TYPE_TOGGLE type is activated')}, 
        'deactivate': function(){alert('Control of TYPE_TOGGLE type is deactivated')}
    }
}); 
3 Добавление кнопки в панель

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

panel_type2.addControls([_aBtn2]); 
4 Результат
Результат можно посмотреть здесь.

OpenLayers.Control.Button.type = OpenLayers.Control.TYPE_TOOL
Данный тип контрола подразумевает, что в любой момент времени активной может быть только одна кнопка панели. Создадим две кнопки и продемонстрируем как это работает.

1 Создание панели
Свойство allowDepress контрола OpenLayers.Control.Panel позволяет выключать включенный контрол путём нажатия на нём.

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

panel_type3 = new OpenLayers.Control.Panel({displayClass: 'Panel3', allowDepress: true});
map.addControl(panel_type3); 
2 Создание кнопок
Создаём 2 кнопки класса OpenLayers.Control.Button, указываем тип 3 (можно написать type: OpenLayers.Control.TYPE_TOOL) и прописываем функции на события 'activate' и 'deactivate'.

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

aBtn3 = new OpenLayers.Control.Button({displayClass: 'first', type: 3,
    eventListeners: {
        'activate': function(){alert('First control of TYPE_TOOL type is activated')},
        'deactivate': function(){alert('First control of TYPE_TOOL type is deactivated')}
    }
});
_bBtn3 = new OpenLayers.Control.Button({displayClass: 'second', type: 3,
    eventListeners: {
        'activate': function(){alert('Second control of TYPE_TOOL type is activated')},
        'deactivate': function(){alert('Second control of TYPE_TOOL type is deactivated')}
    }
}); 
3 Добавление кнопок в панель

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

panel_type3.addControls([_aBtn3,_bBtn3]); 
4 Результат
Результат можно посмотреть здесь.

CSS

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

#mapdiv {
width: 400px;
height: 400px;
border: 1px solid #dddddd;
}

.Panel1 {
width: 18px;
height: 54px;
cursor: pointer;
right: 10px;
top: 10px;
}

.Panel2 {
width: 18px;
height: 54px;
cursor: pointer;
right: 10px;
top: 74px;
}

.Panel3 {
width: 18px;
height: 54px;
cursor: pointer;
right: 10px;
top: 138px;
}

.firstItemInactive,.secondItemInactive {
background: #30d5c8;
border: 2px solid #075f67;
width: 18px;
height: 18px;
}

.firstItemActive, .secondItemActive {
background: #ffffdd;
border: 2px solid #dddddd;
width: 18px;
height: 18px;
}
Spatial is now, more than ever, just another column- The Geometry Column.

Ответить

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