如何使用Openlayers文本層編輯彈出窗口

Question

我正在使用Openlayers創建一個大約1000多個點的地圖。 目前，當我點擊一個點的圖標時，該點的描述會顯示在彈出窗口中，要退出彈出窗口，我需要再次點擊同一個點的圖標。 有沒有辦法修改代碼，以便我可以按一個關閉按鈕或我可以點擊地圖上的任何地方，以便這個彈出窗口將再次關閉？ 我知道有一種方法，如果我只是使用常規彈出窗口，但我使用的是Openlayers.layer.text圖層。

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

我使用此代碼添加文本圖層。 在文本文件中將是以下列：lon lat標題描述圖標iconSize iconOffset。 我應該為彈出窗口添加另一列嗎？ 我已經嘗試了一個應該修改彈出窗口大小的列，但它對我不起作用。 所以，到目前為止，我還沒有能夠修改彈出窗口，除了它的內容。

Answer 1

如果要刷新具有控件的地圖，請注意不要有多個控件和事件處理程序（請參閱本文末尾的最后一個注釋）。

兩個不同的事件可以關閉彈出窗口：彈出窗口中的CLOSE（'X'）框和一個自動過程，當彈出窗口失去焦點時關閉彈出窗口。

此偽代碼取自功能映射，其中彈出窗口在用戶單擊任何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個函數關聯到EVENTS（當選擇和取消選擇MARKER時）：

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

這些是選擇MARKER或UNSELECTED時的兩個功能

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'的GLOBAL變量。 我這樣做的原因是我的onFeatureUnselect將用於銷毀彈出窗口，以防它是未選擇的或關閉的CLOSE BOX。

如果我沒有將該功能保存為全局變量，我將不得不單獨處理取消選擇和關閉框，因為每個原因都有所不同。

要在彈出窗口中創建CLOSE BOX，我將倒數第二個參數（在onFeatureSelect函數的彈出聲明中）設置為TRUE，並將onFeatureUnselect命名為關閉框的回調函數：

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

最后注意：如果您在圖層上使用刷新，請注意不要復制處理程序。 在這種情況下，當你的javascript啟動時，創建一個變量'id1'，它將保存你的selectStop控件ID。 在創建新控件和處理程序之前檢查它是否存在。 像這樣：

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個相同的彈出窗口（順便說一句，ID相同）。

Answer 2

在構造函數調用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事件關閉彈出窗口。