Как редактировать всплывающее окно, используя текстовый слой Openlayers - PullRequest
Новая
       4

Как редактировать всплывающее окно, используя текстовый слой Openlayers

4 голосов
/ 18 февраля 2012

Я создаю карту с примерно 1000+ точками, используя Openlayers.В настоящее время, когда я нажимаю на значок одной точки, описание точки появляется во всплывающем окне, и чтобы выйти из него, мне нужно снова щелкнуть значок той же точки.Есть ли способ изменить код для этого, чтобы я мог нажать кнопку закрытия или щелкнуть в любом месте карты, чтобы это всплывающее окно снова закрылось?Я знаю, что есть способ, если я просто использую обычное всплывающее окно, но я использую слой Openlayers.layer.text.

var pois = new OpenLayers.Layer.Text( "Frequencies",
                { location:"./frequencyrange.txt",
                  projection: map.displayProjection
                });
        map.addLayer(pois);

Я использую этот код для добавления текстового слоя.Внутри текстового файла будут следующие столбцы: lon lat title description iconSize iconOffset.Есть ли еще один столбец, который я должен добавить для всплывающего окна?Я пробовал столбец, который должен был изменить размер всплывающего окна, но он не работал для меня.Итак, до сих пор я не смог изменить всплывающее окно, за исключением того, что в нем.

Ответы [ 2 ]

3 голосов
/ 26 июня 2012

если вы обновляете карту с элементами управления, будьте осторожны, чтобы не иметь нескольких элементов управления и обработчиков событий (см. ПОСЛЕДНЮЮ ЗАМЕТКУ в конце этого поста).

два разных события могут закрыть ваше всплывающее окно: aПоле ЗАКРЫТЬ ('X') внутри всплывающего окна И автоматическая процедура, которая закрывает всплывающее окно, когда всплывающее окно теряет фокус.

этот псевдокод был взят из функциональной карты с всплывающими окнами, которые появляются, когда пользователь нажимает наa any MARKER.

я создаю слой на карте (в данном случае из динамического файла KML, анализируемого по php): 

var urlKML = 'parseKMLTrack07d.php';         
var layerKML = new OpenLayers.Layer.Vector("KML1", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: urlKML,
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });

, затем я создаю элемент выбора, который я вызываю'selectStop' и я связываем 2 функции с СОБЫТИЯМИ (когда МАРКЕР выбран и не выбран): 

var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
layerKML.events.on({
            "featureselected": onFeatureSelect,
            "featureunselected": onFeatureUnselect
        });
map.addControl(selectStop);
selectStop.activate();

это две функции, когда МАРКЕР выбран или НЕ ВЫБРАН 

function onFeatureSelect(event) {
    var feature = event.feature;
    var content = feature.attributes.name + '<br/>'+feature.attributes.description;
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
                             feature.geometry.getBounds().getCenterLonLat(),
                             new OpenLayers.Size(100,100),
                             content,
                             null, true, onFeatureUnselect);
    feature.popup = popup;
    map.addPopup(popup);
    // GLOBAL variable, in case popup is destroyed by clicking CLOSE box
    lastfeature = feature;
}
function onFeatureUnselect(event) {
    var feature = lastfeature;  
    if(feature.popup) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        delete feature.popup;
    }
}

обратите внимание, что в функции onFeatureSelect я создаю глобальную переменную с именем 'lastfeature'.причина, по которой я это делаю, заключается в том, что мой onFeatureUnselect будет использоваться для уничтожения всплывающего окна, если оно НЕ ВЫБРАНО или КОЛЛЕКЦИЯ ЗАКРЫТА.

если бы я не сохранил объект как глобальную переменную, мне пришлось бы отдельно рассматривать отмену выбора и закрытие блока, поскольку СОБЫТИЯ, КОТОРЫЕ ПРИЧИНАЮТ КАЖДОЕ, различны.

для создания внутри коробки ЗАКРЫТЬво всплывающем окне я установил аргумент «от второго до последнего» (в объявлении всплывающего окна в функции onFeatureSelect) в значение «ИСТИНА» и в качестве функции обратного вызова для поля закрытия выберите «onFeatureUnselect»: 

popup = new OpenLayers.Popup.FramedCloud("chicken", 
                         feature.geometry.getBounds().getCenterLonLat(),
                         new OpenLayers.Size(100,100),
                         content,
                         null, true, onFeatureUnselect);

ПОСЛЕДНЕЕ ПРИМЕЧАНИЕ: если вы используетеобновить слой, будьте осторожны, чтобы не дублировать ваши обработчики.в этом случае, когда ваш javascript запускается, создайте переменную 'id1', которая будет содержать ваш идентификатор элемента управления selectStop.проверьте, существует ли он, прежде чем создавать новый элемент управления и обработчик.например: 

if (id1 == '') {
    var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

    layerKML.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
    map.addControl(selectStop);
    selectStop.activate(); 
    id1 = selectStop.id;
} else {
    selectStop = OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
}

вы можете проверить, дублируете ли вы свои обработчики событий, поместив предупреждение в свой onFeatureSelect.Если вы нажмете на маркер и получите несколько окон предупреждений, то у вас будут дубликаты обработчиков.создается впечатление, что вы не можете уничтожить всплывающее окно, что не соответствует действительности.вы уничтожили ОДНО всплывающее окно, но у вас есть N одинаковых всплывающих окон (кстати, с таким же идентификатором).

2 голосов
/ 08 марта 2012

В вызове конструктора для Popup вы можете указать, что должно присутствовать закрывающее окно.

Из документации OpenLayers: http://dev.openlayers.org/apidocs/files/OpenLayers/Popup-js.html

Parameters
...
closeBox    {Boolean} Whether to display a close box inside the popup.
closeBoxCallback    {Function} Function to be called on closeBox click.

и если вы используете слойсобытие featureselected для отображения всплывающего окна, вы можете использовать событие featureunselected для закрытия всплывающего окна.

...