`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

线段渲染样式

线宽、颜色与虚线动画在矢量层样式里配置,绘制新线即时套用同一套样式。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

官方示例用 WebGL 渲染器展示描边样式选项。这里用 Canvas 矢量层实现同一组效果: ol.style.Stroke 的 width、color、 lineDash 与 lineDashOffset,绘制中的预览线与成品线共用样式函数。

虚线偏移按定时器递减,配合 layer.changed() 触发重绘, 形成流动效果;关掉动画后样式对象不再变化,重绘随之停止。

操作结果
在地图上画线新线立即采用当前颜色、线宽与虚线设置
拖动线宽滑块所有线同步变粗或变细
勾选「虚线动画」虚线段沿线条方向流动

逐帧调用 layer.changed() 会整层重绘,要素多时开销明显;要素量大应改用 WebGL 渲染器或在样式中使用时间表达式。

`r`n
`r`n