Openlayers 6 实时动态样式


使用技术

  Javascript;Openlayers6

实现效果

代码

let colorNumber = 0;
            self.map.on('precompose',function () {
                colorNumber=colorNumber+1;
                if (colorNumber==self.colorArr.length) {
                    colorNumber = 0;
                }
                let color = `rgb(${self.colorArr[colorNumber][0]},${self.colorArr[colorNumber][1]},${self.colorArr[colorNumber][2]})`
                changeLayer.setStyle(
                    new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: color,
                            width: 2
                        }),
                        fill: new  ol.style.Fill({               //填充样式
                            color: '#111'
                        }),
                    })
                )
            })

  

colorArr 是RGB渐变数组。
precompose 地图事件:在渲染完成前触发

通过不断的更新样式一直触发渲染事件就可以实现动态样式。
GIS