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

如何使用Openlayers文本层编辑弹出窗口

2 个答案: