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 地图事件:在渲染完成前触发
通过不断的更新样式一直触发渲染事件就可以实现动态样式。