Blazor中Syncfusion Maps子图层去饱和颜色映射图例不显示求助

核心原因 #

当子图层使用渐变颜色列表而非离散的范围颜色映射时，Syncfusion Maps 无法自动识别渐变对应的数值分段规则，导致图例组件无法生成有效渲染内容，仅显示空白边框；而范围颜色映射是明确的键值对分段，图例可正常解析。

具体解决步骤 #

1. 手动构建图例数据源
   针对你的渐变颜色，手动定义对应的数值分段和文本说明，确保图例项与渐变颜色一一对应：

   // 根据你的污染数据范围调整分段和文本
   private List<CustomLegendItem> PollutionLegendData = new List<CustomLegendItem>
   {
       new() { Text = "低污染", Color = "#f0f9e8" },
       new() { Text = "中低污染", Color = "#bae4bc" },
       new() { Text = "中高污染", Color = "#7bccc4" },
       new() { Text = "高污染", Color = "#2b8cbe" }
   };
   
   public class CustomLegendItem
   {
       public string Text { get; set; }
       public string Color { get; set; }
   }
   

2. 配置子图层的颜色映射与图例
   将渐变颜色改为LinearColorMapping（明确数值范围），同时关闭子图层自动图例，绑定自定义数据源：

   <SfMaps>
       <MapsLayers>
           <!-- OpenStreetMaps 底图 -->
           <MapsLayer LayerType="Syncfusion.Blazor.Maps.Type.OSM" TValue="string"></MapsLayer>
           
           <!-- 污染数据子图层 -->
           <MapsLayer ShapeData='@YourShapeData' TValue="PollutionModel">
               <MapsShapeSettings ColorValuePath="PollutionLevel">
                   <MapsColorMapping>
                       <!-- 基于数值范围的线性渐变 -->
                       <MapsLinearColorMapping From="0" To="50" 
                                               Color="@new string[] { "#f0f9e8", "#bae4bc", "#7bccc4", "#2b8cbe" }" />
                   </MapsColorMapping>
               </MapsShapeSettings>
               <!-- 绑定自定义图例 -->
               <MapsLegendSettings Visible="true" LegendData="@PollutionLegendData" />
           </MapsLayer>
       </MapsLayers>
       
       <!-- 主图例容器，控制显示位置 -->
       <MapsLegendSettings Visible="true" Position="LegendPosition.Bottom" />
   </SfMaps>
   

3. 强制渲染自定义图例项（可选）
   如果子图层图例仍未显示，可直接在主图例容器中手动添加图例项：

   <MapsLegendSettings Visible="true" Position="LegendPosition.Bottom">
       <LegendItems>
           @foreach (var item in PollutionLegendData)
           {
               <MapsLegendItem Text="@item.Text" Fill="@item.Color" />
           }
       </LegendItems>
   </MapsLegendSettings>
   

注意事项 #

• 确保PollutionModel中的PollutionLevel数值范围，与MapsLinearColorMapping的From/To完全匹配，避免颜色映射偏差。
• 若渐变颜色是动态生成的，需同步更新PollutionLegendData，保持颜色与文本的对应关系。

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