Remember to add bugs of interactive modification style to openlayers once

openlayers version: 4.6.4

Implementation function: move the mouse into the feature to modify the style of the feature

effect:

Before mouse move in:

After the mouse is moved in:

Style code before move in: styleFunction used here

    //Face style method
            polygonStyleFunction:function(feature,resource){
                var style = new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#5076b3',
                        width: 0.5
                    }),
                    text: new ol.style.Text({
                        font: '12px Microsoft YaHei ,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#ffffff'
                        }),
                        placement:'point',
                        backgroundStroke:new ol.style.Stroke({
                            color:'#4D98DD',
                            width:1
                        }),
                        backgroundFill:new ol.style.Fill({
                            color:'#4D98DD'
                        })
                    })
                });
                if(feature.get('name')){
                    style.getText().setText(feature.get('name'));
                }
                return [style];
            }

Style after mouse in:

var polygonHighlightStyle = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#ff1824',
                        width: 2
                    }),
                    fill: new ol.style.Fill({
                        color: 'rgba(255,0,0,0.0)'
                    }),
                    text: new ol.style.Text({
                        font: '12px Microsoft YaHei ,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#4c76cc'
                        }),
                        placement:'point',
                        backgroundStroke:new ol.style.Stroke({
                            color:'#feff2a',
                            width:1
                        }),
                        backgroundFill:new ol.style.Fill({
                            color:'#feff2a'
                        }),
                        text:"test"
                    })
                });



 // TODO slide over highlight ------ move in highlight
                polygonPointerMove = new ol.interaction.Select({
                    condition: ol.events.condition.pointerMove,      /** Move trigger*/
                    style:function (feature) {
                        if(feature.get('name')){
                            polygonHighlightStyle.getText().setText(feature.get('name'));
                        }
                        return [polygonHighlightStyle];
                    },
                    layers:[beijingLayer,jiedaoLayer,shequLayer]
                });

Here, everything is normal, and the effect is also in line with expectations. When the mouse is moved in, the font is replaced with the style of blue on the yellow background, and there is no problem moving to other places..
A gliding problem arises:

When you move to the middle element, the background of the Text attribute of other styles disappears, and only when you move into this element will there be this problem...............

I thought there was something wrong, and then I changed the layers,

Then I tried a lot of methods, but they couldn't solve the problem. When I thought about the reason of the order of loading elements, I found that it wasn't the problem either

Please let me know if any God knows

Tags: Attribute

Posted on Thu, 30 Apr 2020 06:22:26 -0700 by tekrscom