Openlayers：LineString 上的渐变发光

Question

我有一个渲染 LineStrings 的图层，我正在尝试对线条应用发光效果。我创建的样式使用自定义渲染器创建具有垂直于每个线段的渐变的笔划：

const glow_style = new Style({
  renderer: (_coords, state) => {
    const ctx = state.context;
    const coords = _coords as Coordinate[];
    ctx.lineWidth = 25;
    for (let i = 1; i < coords.length; i++) {
      const start = coords[i - 1];
      const end = coords[i];
      const [grd_start, grd_end] = getPerpendicularPoints(start, end, ctx.lineWidth);
      const grd = ctx.createLinearGradient(grd_start[0], grd_start[1], grd_end[0], grd_end[1]);
      grd.addColorStop(0, '#ffffff00');
      grd.addColorStop(0.5, 'white');
      grd.addColorStop(1, '#ffffff00');
      ctx.strokeStyle = grd;
      ctx.beginPath();
      ctx.moveTo(start[0], start[1]);
      ctx.lineTo(end[0], end[1]);
      ctx.stroke();
    }
  }
});

此样式适用于完全直线，但在拐角处失效，因为渐变线段之间的连接不好。如果 ctx.lineCap 保留为 butt，渐变在拐角处不连续。如果设置为round，线段会接触，但渐变会因为重叠而变得不连续。以下是每个示例：

我有哪些选项可以沿整个 LineString 创建平滑的渐变？

Answer 1

渲染整个线串而不通过绘制宽度递减的线将其分成线段会更简单。对于平滑的渐变，每条线的不透明度应定义为剩余透明度的分数。它甚至可以作为 OpenLayers 样式数组来完成：

var steps = 13;
var styles = [];
for (var i = 0; i < steps; i++) {
    styles.push(
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: [255, 255, 255, 1/(steps - i)],
                width: (steps-i)*2 - 1
            })
        })
    );
}

Openlayers：LineString 上的渐变发光

Openlayers: Gradient glow on LineString

typescript

openlayers

transparency