Javascript 根据集合的颜色动态创建颜色图例

我试图创建一个基于集合的图例，下面的代码进入一个Shapefile并提取特定的列数据，然后我们为数据指定一种颜色。这是我在控制器中制作的，我想知道是否可以基于这个集合创建一个HTML图例，我想这样做的方式是创建带有我们想要图例的每个层的单选按钮。我知道这可能是模糊的，但我真的不知道如何描述它

如有任何建议，将不胜感激

 private Collection<ValueItem> colorSelect(Collection<Feature> allFeatures, string layercode,Collection<ValueItem> valueItems)
    {

        List<string> values = new List<string>();
        foreach (Feature f in allFeatures)
        {
            if (f.ColumnValues.ContainsKey(layercode))
            {
                if (!values.Contains(f.ColumnValues[layercode].ToString()))
                {
                    values.Add(f.ColumnValues[layercode].ToString());
                }
            }

        }


        if (values.Count > 0)
        {
            Random randomGen = new Random();
            int count = 0;
            foreach (string esnCode in values)
            {
                //int count = 0;
                if (count == 0)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Green, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 1)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Pink, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 2)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Blue, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 3)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Yellow, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 4)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Violet, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 5)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Red, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 6)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Aqua, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 7)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Black, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 8)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Brown, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 9)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.Coral, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                if (count == 10)
                {
                    ValueItem item = new ValueItem(esnCode, AreaStyles.CreateSimpleAreaStyle(GeoColor.StandardColors.DarkKhaki, GeoColor.StandardColors.Black, 3));
                    valueItems.Add(item);

                }
                count++;
            }

        }
        return (valueItems);
    }

private Collection colorSelect（集合所有功能、字符串层代码、集合值项）
{
列表值=新列表（）；
foreach（所有功能中的功能f）
{
if（f.ColumnValues.ContainsKey（layercode））
{
如果（！values.Contains（f.ColumnValues[layercode].ToString（））
{
Add（f.ColumnValues[layercode].ToString（））；
}
}
}
如果（values.Count>0）
{
Random randomGen=新的Random（）；
整数计数=0；
foreach（值中的字符串esnCode）
{
//整数计数=0；
如果（计数=0）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Green，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=1）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Pink，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=2）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Blue，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=3）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Yellow，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=4）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Violet，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=5）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Red，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=6）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Aqua，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=7）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Black，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=8）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.Brown，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
如果（计数=9）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColor.Coral，GeoColor.StandardColor.Black，3））；
价值项目。添加（项目）；
}
如果（计数=10）
{
ValueItem item=新的ValueItem（esnCode，AreaStyles.CreateSimpleAreaStyle（GeoColor.StandardColors.DarkKhaki，GeoColor.StandardColors.Black，3））；
价值项目。添加（项目）；
}
计数++；
}
}
申报表（价值项目）；
}

好的，获取颜色数据后，必须将其传递给视图并对其进行处理。 您有两个传递它的选项：

作为榜样

在可视包中

不管你选择什么选项，但假设我们在查看包中传递它

public ActionResult ColorsLegend()
{
     var listOfColors = colorSelect(args..);
     ViewBag.colorList = listOfColors;

     return View();
}

在视图中，您可以遍历此颜色列表并实际执行所需操作。F.e让我们为该颜色创建一个色块和名称列表

@foreach(var item in ViewBag.colorList){
   <div style='background-color:@item.colorValue;width:100px;height:20px;float:left;'></div>
   <span style='float:left;'> - @item.colorName </span>
}

@foreach（ViewBag.colorList中的变量项）{
-@item.colorName
}

很抱歉问一下，您如何处理模型？如果您有一个模型，那么在控制器中，您应该像这样将其传递给视图：返回视图（myModelObject）；在顶部的视图中，您应该指定视图期望的模型类型，而不是ViewBag.colorList使用model.colorList，或者如果模型本身是一个颜色列表，则仅使用model:）