Форумы GIS-Lab.info

Хочу поделиться способом создания тултипов, подсмотренным здесь. Судя по всему приведенный по ссылке код позиционирования тултипов в окне карты предназначен для точечных объектов, так как у полигонов нет свойств 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, то при наведении мыши на объект он подсвечивается и появляется тултип, но если, не выходя за рамки выделенного объекта поместить указатель мыши на этот тултип - выделение объекта снимается и соответственно тултип пропадает. Если решим проблему - можно будет перенести этот топик в рецепты.

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

Пример построения тултипов на основе стандартных попапов (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;
        }

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

Форумы GIS-Lab.info

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

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

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

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

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