动态创建基于集合的颜色图例

时间:2014-10-31 16:44:25

标签: javascript html asp.net-mvc

我正在尝试基于集合创建图例,下面的代码进入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);
    }

1 个答案:

答案 0 :(得分:1)

好的,一旦你获取了你的颜色数据,你必须将它传递给视图并对它做一些事情。 你有两种传递方式:

  1. 作为模特
  2. ViewBag中的
  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>
    }