如何使用Openlayers文本层编辑弹出窗口 [英] How to Edit Popup using Openlayers Text Layer

问题描述

我正在使用Openlayers创建一个大约1000多个点的地图。目前，当我点击一个点的图标时，该点的描述会显示在弹出窗口中，要退出弹出窗口，我需要再次点击同一个点的图标。有没有办法修改代码，以便我可以按一个关闭按钮或我可以点击地图上的任何地方，以便这个弹出窗口将再次关闭？我知道有一种方法，如果我只是使用常规弹出窗口，但我使用的是Openlayers.layer.text图层。

I am creating a map with about 1000+ points using Openlayers. Currently when I click on one point's icon, the description for the point shows up in a popup, and to exit the popup I need to click on the same point's icon again. Is there a way to modify the code for this so that I can press a close button or I can click anywhere on the map so that this popup will close again? I know there is a way if I am just using a regular popup but I am using an Openlayers.layer.text layer.

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

我使用此代码添加文本图层。在文本文件中将是以下列：lon lat标题描述图标iconSize iconOffset。我应该为弹出窗口添加另一列吗？我已经尝试了一个应该修改弹出窗口大小的列，但它对我不起作用。所以，到目前为止，我还没有能够修改弹出窗口，除了它的内容。

I use this code to add the text layer. Within the text file would be the following columns: lon lat title description icon iconSize iconOffset. Is there another column that I should add for the popup? I have tried a column that was supposed to modify the size of the popup but it did not work for me. So, so far I have not been able to modify the popup except for what is in it.

推荐答案

如果要刷新具有控件的地图，请注意不要有多个控件和事件处理程序（请参阅最后的说明）这个帖子的结尾）。

if you are refreshing a map that has controls, be careful not to have multiple controls and event handlers (see LAST NOTE at the end of this post).

两个不同的事件可以关闭弹出窗口：弹出窗口中的CLOSE（'X'）框和一个关闭弹出窗口的自动程序弹出窗口失去焦点。

two distinct events can close your popup: a CLOSE ('X') box inside the popup AND an automatic procedure that closes the popup when the popup loses focus.

这个伪代码来自功能地图，当用户点击任何MARKER时会出现弹出窗口。

this pseudo-code was taken from a functional map with popup windows that appear when the user clicks on a any MARKER.

我在地图上创建了一个图层（在这种情况下来自动态KML文件，由php解析）：

i create a layer on the map (in this case from a dynamic KML file, parsed by 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被选中和未被选中）：

then i create a selection control which i call 'selectStop' and i associate 2 functions to EVENTS (when the MARKER is selected and unselected):

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时的两个函数

these are the two functions for when the MARKER is selected or 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函数中，我创建了一个GLOBAL变量称为lastfeature。我这样做的原因是我的onFeatureUnselect将用于销毁弹出窗口，以防它是未选择的或关闭的CLOSE BOX。

please note that in the onFeatureSelect function, i create a GLOBAL variable called 'lastfeature'. the reason i do this is so that my onFeatureUnselect will be used to destroy the popup in case it it is UNSELECTED or the CLOSE BOX IS CLICKED.

如果我没有将该功能保存为全局变量，我将不得不单独处理取消选择和关闭框，因为每次引发的事件都不同。

if i did not save the feature as a global variable i would have to treat unselection and close box clicking separately, because the EVENTS THAT CAUSE EACH are different.

在弹出窗口中创建CLOSE BOX，我将倒数第二个参数（在onFeatureSelect函数的弹出声明中）设置为TRUE，并将onFeatureUnselect命名为关闭的回调函数框：

to create the CLOSE BOX inside the popup, i set the second to last argument (in the popup declaration in the onFeatureSelect function) to TRUE and name onFeatureUnselect as the callback function for the close box:

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

最后注意：如果您在图层上使用刷新，请注意不要复制处理程序。在这种情况下，当你的javascript启动时，创建一个变量'id1'，它将保存你的selectStop控件ID。在创建新控件和处理程序之前检查它是否存在。像这样：

LAST NOTE: if you are using refresh on a layer, be careful not to duplicate your handlers. in that case, when your javascript starts, create a variable 'id1' which will hold your selectStop control id. check if it exists before creating a new control and handler. like this:

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

you can check if you are duplicating your event handlers, by puting an alert in your onFeatureSelect. if you click on a marker and you get multiple alert windows, then you have duplicate handlers. you get the impression that you cannot destroy a popup, which is untrue. you destroyed ONE popup, but you have N identical popups (with the same id, by the way).

这篇关于如何使用Openlayers文本层编辑弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！