javascript - How to Edit Popup using Openlayers Text Layer - Stack Overflow

admin管理员组

文章数量:1390992

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

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.

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

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.

• javascript
• gis
• openlayers

Share Improve this question Follow edited Feb 18, 2012 at 7:08 meebee asked Feb 18, 2012 at 6:47 meebeemeebee 26111 gold badge77 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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).

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.

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

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

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

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;
    }
}

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.

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

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

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).

In the constructor call to the Popup, you can specify that a close box should be present.

From OpenLayers documentation: http://dev.openlayers/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.

and if you use the layer event featureselected to display the popup, you can use the featureunselected event to close the popup.

本文标签： javascriptHow to Edit Popup using Openlayers Text LayerStack Overflow