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
            })
        })
    );
}