如何在Mapsui WPF中基于数据实现渐变风格的线条样式？

方案1：自定义SkiaSharp线条渲染器（适配Mapsui） #

Mapsui默认线条样式不支持渐变，需自行实现IStyle，用SkiaSharp的渐变画笔完成渲染。

核心步骤 #

• 创建自定义Style类，实现IStyle接口，重写CreateRenderer方法返回自定义渲染器
• 自定义渲染器继承LineRenderer，重写Draw方法，用SKGradientShader创建渐变画笔替代默认单色画笔

示例代码 #

using Mapsui.Rendering.Skia;
using Mapsui.Styles;
using SkiaSharp;

// 自定义渐变线条样式
public class GradientLineStyle : Style, IStyle
{
    public SKColor StartColor { get; set; }
    public SKColor EndColor { get; set; }
    public float Width { get; set; } = 2f;

    public override IRenderer CreateRenderer()
    {
        return new GradientLineRenderer(this);
    }
}

// 自定义渐变线条渲染器
public class GradientLineRenderer : LineRenderer
{
    private readonly GradientLineStyle _style;

    public GradientLineRenderer(GradientLineStyle style)
    {
        _style = style;
    }

    public override void Draw(SKCanvas canvas, IViewport viewport, ILayer layer, IFeature feature, IStyle style)
    {
        if (feature.Geometry is not LineString lineString) return;

        // 地理坐标转屏幕坐标
        var points = lineString.Coordinates.Select(c => viewport.WorldToScreen(c)).ToArray();
        if (points.Length < 2) return;

        // 创建线性渐变（线条起点到终点）
        var startPoint = points[0];
        var endPoint = points[^1];
        var shader = SKShader.CreateLinearGradient(
            new SKPoint(startPoint.X, startPoint.Y),
            new SKPoint(endPoint.X, endPoint.Y),
            new[] { _style.StartColor, _style.EndColor },
            null,
            SKShaderTileMode.Clamp);

        // 配置画笔
        using var paint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            StrokeWidth = _style.Width,
            Shader = shader,
            IsAntialias = true
        };

        // 绘制路径
        using var path = new SKPath();
        path.MoveTo(points[0].X, points[0].Y);
        for (int i = 1; i < points.Length; i++)
        {
            path.LineTo(points[i].X, points[i].Y);
        }
        canvas.DrawPath(path, paint);
    }
}

使用方式 #

给线条Feature添加自定义样式：

var lineFeature = new Feature { Geometry = yourLineString };
lineFeature.Styles.Add(new GradientLineStyle
{
    StartColor = SKColors.Blue,
    EndColor = SKColors.Red,
    Width = 3f
});

方案2：基于数据属性的动态渐变 #

若需根据Feature的字段（如速度、海拔）动态生成渐变，可修改渲染器从Feature属性中读取渐变参数：

修改后的渲染器关键代码 #

public override void Draw(SKCanvas canvas, IViewport viewport, ILayer layer, IFeature feature, IStyle style)
{
    if (feature.Geometry is not LineString lineString) return;
    // 从Feature属性中获取渐变颜色参数
    if (!feature.Attributes.TryGetValue("StartColor", out var startColorObj) ||
        !feature.Attributes.TryGetValue("EndColor", out var endColorObj)) return;

    var startColor = SKColor.Parse(startColorObj.ToString());
    var endColor = SKColor.Parse(endColorObj.ToString());

    // 后续渐变创建、路径绘制逻辑同方案1
}

使用时配置Feature属性 #

lineFeature.Attributes["StartColor"] = "#00FF00"; // 绿色
lineFeature.Attributes["EndColor"] = "#FF0000"; // 红色
lineFeature.Styles.Add(new GradientLineStyle { Width = 3f });

关于GradientTheme失效的说明 #

Mapsui的GradientTheme仅针对面要素设计（用于分级设色地图），不支持线条要素，因此无法实现线条渐变效果。

内容的提问来源于stack exchange，提问作者Sun92