首页 / OpenLayers / API 文档

Stroke

先看结论

描边样式。控制线和面边框的颜色、宽度、虚实，以及端点与拐角的形状。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.style.Stroke(options)

构造参数

参数	默认	说明
`color`	—	颜色字符串或颜色数组
`width`	1	线宽，像素，不随缩放变化
`lineCap`	`'round'`	端点形状：`butt`、`round`、`square`
`lineJoin`	`'round'`	拐角形状：`bevel`、`round`、`miter`
`lineDash`	`null`	虚实数组，如 `[10, 6]`
`lineDashOffset`	0	虚线起始偏移，可做流动效果
`miterLimit`	10	`miter` 拐角的长度上限

/* 实线 */
new ol.style.Stroke({ color: '#1f5fd0', width: 2 });

/* 虚线 */
new ol.style.Stroke({
  color: '#d0453a',
  width: 2,
  lineDash: [8, 5],
  lineCap: 'butt'
});

/* 白色描边做文字外框 */
new ol.style.Stroke({ color: '#ffffff', width: 3 });

常用方法

方法	说明
`getColor()` / `setColor(c)`	读写颜色
`getWidth()` / `setWidth(w)`	读写线宽
`getLineDash()` / `setLineDash(d)`	读写虚线数组
`getLineCap()` / `setLineCap(v)`	读写端点样式
`getLineJoin()` / `setLineJoin(v)`	读写拐角样式
`clone()`	复制样式

线宽是像素

width 的单位是屏幕像素，不是地图单位。缩小时，一条 2 像素的线代表的实际宽度越来越大，所以在大范围视图里道路会显得很粗。

按分辨率调整线宽的写法：

function styleFunction(feature, resolution) {
  /* 低分辨率（放大）时线细，高分辨率（缩小）时线粗 */
  var width = resolution < 10 ? 2 : 1;

  return new ol.style.Style({
    stroke: new ol.style.Stroke({ color: '#1f5fd0', width: width })
  });
}

lineDash 的数组表示“实线段长度、空白段长度”交替。单位同样是像素，因此缩放时虚线的疏密观感会变化。需要恒定观感时用样式函数按分辨率换算。

流动虚线的做法

把 lineDashOffset 放在动画帧里递减，虚线就会沿线方向滚动，适合表示管线流向或导航路径：

var offset = 0;
var flowStyle = new ol.style.Stroke({
  color: '#1f5fd0',
  width: 3,
  lineDash: [12, 8]
});

function animateDash() {
  offset -= 1;
  flowStyle.setLineDashOffset(offset);
  vectorLayer.changed();
  requestAnimationFrame(animateDash);
}

animateDash();

每帧调用 changed() 会让整层重绘。要素很多时开销明显，应对只包含这条线的独立图层做动画。

引用本文

经纬志（2026）。《Stroke》。https://www.jingweizhi.com/openlayers/api/stroke.html（访问日期 2026-11-03）。