OpenLayers: создание тултипов

[Denis Rykov]

Хочу поделиться способом создания тултипов, подсмотренным здесь. Судя по всему приведенный по ссылке код позиционирования тултипов в окне карты предназначен для точечных объектов, так как у полигонов нет свойств x и y:

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

var point  = new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y) 

Адаптируем данный код для показа тултипов полигональных слоёв. Требуется библиотека jQuery.

0. CSS стиль будущего тултипа:

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

.openlayers-tooltip {
    font-family: arial;
    position: absolute;
    border: 1px solid #111;
    background-color: #EEE;
    opacity: 0.85;
} 

1. Подключаем jQuery:

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

<script src="jquery-1.3.1.min.js"></script>

2. Cоздаём переменную, в которой будут хранится координаты текущего положения мыши:

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

var currPos; 

3. Создаём объект для работы с тултипами:

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

OpenLayersTooltips = {}; 

4. Формируем содержимое тултипа. В функцию передаётся объект feature и из него извлекается значение свойства 'attrname':

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

OpenLayersTooltips.getToolTip = function(feature){
        var text = "<div class='openlayers-tooltip'>";
        text += feature.attributes['attrname'];
        text += "</div>";
        return $(text);
    } 

5. Добавляем тултип на карту. currPos.x и currPos.y - координаты текущего положения мыши, откуда они берутся покажем ниже:

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

OpenLayersTooltips.select = function(feature) {
        var tooltip = OpenLayersTooltips.getToolTip(feature);
        $(tooltip).css({zIndex:1000,left:currPos.x+10,top:currPos.y+10});
        $(feature.layer.map.div).append(tooltip);
    }; 

6. Удаление тултипа с карты:

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

OpenLayersTooltips.unselect = function(feature) {
        $(feature.layer.map.div).children('div.openlayers-tooltip').remove();
    }; 

7. Для получения значений текущего положения мыши, добавляем в объект map следующие строки:

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

var map = new OpenLayers.Map({
...
eventListeners: {
            "mouseover": function(evt) {currPos = evt.xy;}
        }
 

8. Будем вызывать функции добавления и удаления тултипов из контрола SelectFeature:

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

select = new OpenLayers.Control.SelectFeature([layer],{onSelect:OpenLayersTooltips.select, onUnselect:OpenLayersTooltips.unselect});
map.addControl(select);
select.activate(); 

P.S. Метод опробован, в принципе все работает, но есть маленькая проблема. Если подскажете как ее решить - буду признателен. Если в контроле SelectFeature стоит hover:true, то при наведении мыши на объект он подсвечивается и появляется тултип, но если, не выходя за рамки выделенного объекта поместить указатель мыши на этот тултип - выделение объекта снимается и соответственно тултип пропадает. Если решим проблему - можно будет перенести этот топик в рецепты.

[Denis Rykov]

Можно обойтись стандартными OL попапами, идея здесь. Но и при этой реализации остается проблема потери фокуса выделенного объекта при наведении мышью на попап.

[Denis Rykov]

Пример построения тултипов на основе стандартных попапов (c решеной проблемой потери фокуса выделенного объекта при наведении мышью на попап). Функции, соответствующие по своему назначению функциям
OpenLayersTooltips.select и OpenLayersTooltips.unselect из первого поста:

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

function onFeatureSelect(feature){
        popup = new OpenLayers.Popup.AnchoredBubble("popupid", 
            feature.layer.getLonLatFromViewPortPx(currPos),
            null,
            feature.attributes['attrname'],
            null);
        popup.autoSize = true;
        popup.panMapIfOutOfView = true;
        feature.popup = popup;
        map.addPopup(popup);
        popup.events.register("mouseover",popup,function(){
                        onFeatureUnselect(feature);
                        select.select(feature);})}
    } 

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

function onFeatureUnselect(feature) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
        } 

[Denis Rykov]

Ещё один пример создания тултипов.