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

Question

我正在使用 Openlayers 创建一个包含大约 1000 多个点的 map 。目前，当我点击一个点的图标时，该点的描述会出现在弹出窗口中，要退出弹出窗口，我需要再次点击同一个点的图标。有没有办法为此修改代码，以便我可以按下关闭按钮，或者我可以单击 map 上的任意位置，以便再次关闭此弹出窗口？我知道如果我只是使用常规弹出窗口但我使用的是 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。我应该为弹出窗口添加另一列吗？我尝试了一个应该修改弹出窗口大小的列，但它对我不起作用。所以，到目前为止，我无法修改弹出窗口，除了其中的内容。

Answer 1

如果您要刷新具有控件的 map ，请注意不要有多个控件和事件处理程序(请参阅本文末尾的最后注释)。

两个不同的事件可以关闭您的弹出窗口:弹出窗口内的关闭 ('X') 框和当弹出窗口失去焦点时关闭弹出窗口的自动程序。

此伪代码取自带有弹出窗口的功能图，当用户点击任何 MARKER 时会出现弹出窗口。

我在 map 上创建了一个图层(在本例中来自动态 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();

这两个函数用于当 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”的全局变量。我这样做的原因是，我的 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)。