如何使用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、title、description、icon、iconSize和iconOffset。是否还有其他列应该添加到弹出窗口中？我尝试过一个列来修改弹出窗口的大小，但对我没有用。到目前为止，除了弹出窗口中已有的内容，我还没有能够修改弹出窗口。

- meebee

Answer 1

如果您正在刷新带有控件的地图，请注意不要有多个控件和事件处理程序（请参见本文末尾的最后一条注释）。

两个不同的事件可以关闭您的弹出窗口：弹出窗口内部的CLOSE（'X'）框和自动过程，当弹出窗口失去焦点时关闭弹出窗口。

这个伪代码来自一个功能地图，其中弹出窗口在用户单击任何标记时出现。

我在地图上创建了一个图层（在这种情况下是从由PHP解析的动态KML文件创建的）。

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();

当标记被选中或未选中时，以下是两个相关函数：

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函数中的弹出窗口声明中，我将倒数第二个参数设置为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）。

- tony gil

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事件来关闭弹出窗口。

- Niklas Wulff