记一次openlayers 添加交互修改样式的Bug

openlayers版本:4.6.4

实现功能:鼠标移入要素修改要素的样式

效果:

鼠标移入前:
记一次openlayers 添加交互修改样式的Bug_第1张图片

鼠标移入后:
记一次openlayers 添加交互修改样式的Bug_第2张图片

移入前样式代码:这里使用的styleFunction

    //面样式方法
            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 微软雅黑,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];
            }

鼠标移入后样式:

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 微软雅黑,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:"测试"
                    })
                });



 // TODO 滑过高亮---------移入高亮
                polygonPointerMove = new ol.interaction.Select({
                    condition: ol.events.condition.pointerMove,      /** 移动触发*/
                    style:function (feature) {
                        if(feature.get('name')){
                            polygonHighlightStyle.getText().setText(feature.get('name'));
                        }
                        return [polygonHighlightStyle];
                    },
                    layers:[beijingLayer,jiedaoLayer,shequLayer]
                });

到这里,一切正常,效果也符合预期,鼠标移入时,字体替换为 黄底蓝字的样式,移到其他也没什么问题。。
滑着滑着就出现了一个问题:

记一次openlayers 添加交互修改样式的Bug_第3张图片

当移到中间这个要素的时候,其他样式的Text属性的 背景全消失了,而只有移入这个要素的时候才会有这个问题。。。。。。。。。。。。。。。

我以为时哪里出现了问题,然后换其他图层,
记一次openlayers 添加交互修改样式的Bug_第4张图片

然后试了很多种方法,都无法解决这个问题,当我想是不是要素加载的顺序的原因的时候发现也不是这个问题

如果有大神知道请告诉我

你可能感兴趣的:(WebGIS,Questions,&,Answers,openlayers3)