SelectFeature style disappear after zoomed

[sicy]

I draw a linestring on a vector layer,and with two selectFeature controls.Now,hover and click event are normal.but , when I zoomed zhe map, zhe line's selected style disappear ...I have no idea to solve this. This is the code for zhe highlight and select.

var linevector = new OpenLayers.Layer.Vector("linevector",{
                styleMap: new OpenLayers.StyleMap({
                    strokeColor : "#000000",
                    strokeWidth : 8
                })
            });
            map.addLayers([googleLayer , linevector]);
            map.setCenter(new OpenLayers.LonLat(13230195.255447, 3754148.174703303), 17);
            var highlightCtrl = new OpenLayers.Control.SelectFeature(linevector, { //highlight
                hover: true,
                highlightOnly: true,
                renderIntent: "temporary",
                selectStyle: {
                    strokeColor: "#FF3300", strokeWidth: 8
                }
            });
            var selectCtrl = new OpenLayers.Control.SelectFeature(linevector, {   //select
                hover: false,
                clickout: false,
                toggle: true,
                multiple: true,
                selectStyle: {
                    strokeColor: "#FFFF00", strokeWidth: 8
                }
            });
            map.addControl(highlightCtrl);
            map.addControl(selectCtrl);
            highlightCtrl.activate();
            selectCtrl.activate();
            var ff = drawline(arry);

Please help me ,Best regards!

[ahocevar]

It is better to use renderIntent throughout. Try the following instead:

var linevector = new OpenLayers.Layer.Vector("linevector", {
    styleMap: new OpenLayers.StyleMap({
        'default': {strokeColor : "#000000", strokeWidth : 8},
        select: {strokeColor: "#FF3300", strokeWidth: 8},
        highlight: {strokeColor: "#FFFF00", strokeWidth: 8}
    })
});
map.addLayers([googleLayer, linevector]);
map.setCenter(new OpenLayers.LonLat(13230195.255447, 3754148.174703303), 17);
var highlightCtrl = new OpenLayers.Control.SelectFeature(linevector, { //highlight
    hover: true,
    highlightOnly: true,
    renderIntent: "highlight"
});
var selectCtrl = new OpenLayers.Control.SelectFeature(linevector, {   //select
    hover: false,
    clickout: false,
    toggle: true,
    multiple: true
});
map.addControl(highlightCtrl);
map.addControl(selectCtrl);
highlightCtrl.activate();
selectCtrl.activate();
var ff = drawline(arry);

This is untested though. It is easier for others to help when you create a working example that shows the problem you have and put the code in a JSFiddle.

[xafilox]

I am having the same problem. When I select a feature and then I zoom in or out, the feature is rendered as it was not selected and then, when I put the mouse over the feature that should be selected, the style is "updated" an now its style is as selected.

I also have created a JSFiddle (http://jsfiddle.net/wY96b/1/) but the script does not show the map because of the KML file I use...Anyway, it is useful to see the code.

Is it a bug or am I doing something wrong?

[sicy]

i am so sorry for 'the' spell to 'zhe'.....

I have solved this problem, when one feature is selected,change its style by yourself,like this ,I set icon bigger when it is selected:

selectCtrl = new OpenLayers.Control.SelectFeature([facilityVector,sourceLineVector,pointvector], { hover: false, clickout: false, toggle: false, }); highlightCtrl = new OpenLayers.Control.SelectFeature(sourceLineVector, { hover: true, highlightOnly: true, renderIntent: "temporary", selectStyle: { strokeColor: "#00FF00", strokeWidth: 3 }, onSelect: function (feature) {

        },
        eventListeners: {
            featurehighlighted: addTip,
            featureunhighlighted: removeTip
        }
    });
    map.addControl(highlightCtrl);
    map.addControl(selectCtrl);
    highlightCtrl.activate();
    selectCtrl.activate();
    facilityVector.events.on({
        "featureselected": function(e) {
            var fea = e.feature;
            if(fea.attributes.id == undefined){
                selectCtrl.unselect(fea);
            }
            if(fea.attributes.id != undefined){
                showFacilityDetail(fea);
            }
        },
    });
    pointvector.events.on({
        "featureselected": function(e) {
            var fea = e.feature;
            fea.style.externalGraphic = fea.attributes.icon;
            fea.style.graphicWidth = 29;
            fea.style.graphicHeight = 29;
            fea.style.label = '\n'+fea.attributes.linetroubleType;
            fea.style.fontColor = 'red';
            pointvector.redraw();
            trouble_id = fea.attributes.id;
            showOperatePanel(fea.attributes.status);
            showTroubleDetail(fea.attributes.id);
            Ext.Array.erase(operationArry,0,operationArry.length);
            rightPanel.expand(true);
        },
        "featureunselected": function(e) {
            var fea = e.feature;
            fea.style.graphicWidth = 18;
            fea.style.graphicHeight = 18;
            pointvector.redraw();
            Ext.Array.erase(operationArry,0,operationArry.length);
            operatePanel.setDisabled(true);
            cleanDom();
            opeartestore.load();
            Ext.getCmp("trouble_opeation").setValue();
        }
    });