首页 / OpenLayers / 使用示例
`r`n 线段渲染样式
线宽、颜色与虚线动画在矢量层样式里配置,绘制新线即时套用同一套样式。
`r`n
源码与运行效果
说明
官方示例用 WebGL 渲染器展示描边样式选项。这里用 Canvas 矢量层实现同一组效果:
ol.style.Stroke 的 width、color、
lineDash 与 lineDashOffset,绘制中的预览线与成品线共用样式函数。
虚线偏移按定时器递减,配合 layer.changed() 触发重绘,
形成流动效果;关掉动画后样式对象不再变化,重绘随之停止。
| 操作 | 结果 |
|---|---|
| 在地图上画线 | 新线立即采用当前颜色、线宽与虚线设置 |
| 拖动线宽滑块 | 所有线同步变粗或变细 |
| 勾选「虚线动画」 | 虚线段沿线条方向流动 |
逐帧调用 layer.changed() 会整层重绘,要素多时开销明显;要素量大应改用 WebGL 渲染器或在样式中使用时间表达式。