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

绘制样式配置

绘制中的预览线与定稿后的样式分开配置,两套主题实时切换。

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

说明

ol.interaction.Draw 接受 style 选项,只影响绘制过程中的预览; 定稿要素的外观由图层样式决定。两者分开,就能在绘制时用醒目的虚线, 完成后恢复常规配色。

示例提供「常规」与「高对比」两套配色,切换时重建绘制交互并调用 layer.changed(),已画要素也会一起换色。

操作结果
绘制时观察预览线红色虚线 + 折点圆点,与定稿样式区分
点「高对比」再画预览与定稿都换成蓝黄配色
点「清空」移除全部要素

把绘制样式写死在图层里会分不清「正在画」和「已经画完」;用交互级 style 是区分两种状态最省事的做法。

`r`n
`r`n