Контрол OpenLayer.Control.Button представляет собой довольно простой класс, имеющий, помимо наследуемых от класса OpenLayer.Control свойств и методов, всего лишь одно собственное свойство:
Код: Выделить всё
type: OpenLayers.Control.TYPE_BUTTON
Код: Выделить всё
trigger: function() {}
OpenLayers.Control.Button.type = OpenLayers.Control.TYPE_BUTTON
1 Создание панели
Создаём панель и добавляем ее на карту:
Код: Выделить всё
panel_type1 = new OpenLayers.Control.Panel({displayClass: 'Panel1'});
map.addControl(panel_type1);
Создаём кнопку класса OpenLayers.Control.Button и определяем функцию trigger. Тип контрола не указываем, так как необходимый нам тип используется по-умолчанию:
Код: Выделить всё
aBtn1 = new OpenLayers.Control.Button({displayClass: 'first',
trigger: function() {alert ('Button of TYPE_BUTTON type is pressed')}
});
Код: Выделить всё
panel_type1.addControls([_aBtn1]);
Результат можно посмотреть здесь.
OpenLayers.Control.Button.type = OpenLayers.Control.TYPE_TOGGLE
1 Создание панели
Код: Выделить всё
panel_type2 = new OpenLayers.Control.Panel({displayClass: 'Panel2'});
map.addControl(panel_type2);
Создаём кнопку класса 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')}
}
});
Код: Выделить всё
panel_type2.addControls([_aBtn2]);
Результат можно посмотреть здесь.
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 кнопки класса 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')}
}
});
Код: Выделить всё
panel_type3.addControls([_aBtn3,_bBtn3]);
Результат можно посмотреть здесь.
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;
}