如何使用Openlayers文本层编辑弹出菜单

How to Edit Popup using Openlayers Text Layer

本文关键字：菜单 编辑 何使用 Openlayers 文本      更新时间：2023-09-26

我正在使用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。我是否应该为弹出窗口添加另一列？我已经尝试了一个列，本应修改弹出窗口的大小，但它对我不起作用。所以，到目前为止，我还无法修改弹出窗口，除了其中的内容。

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

两个不同的事件可以关闭您的弹出窗口：弹出窗口内的关闭（'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或取消选择时的两个功能

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相同）。

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

相关文章：