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