Javascript 在OpenLayers中使用CSS设置矢量层样式

我使用OpenLayers来显示基于一些API调用的多个向量层。目前，我为每个层使用StyleMap样式组合来设置这些层的样式，如下所示：

var layer1Style = new OpenLayers.Style({
    strokeColor: "blue",
    strokeWidth: 2,
    strokeOpacity: 0.8
});
var layer1 = new OpenLayers.Layer.Vector("Layer 1", {
    strategies: [new OpenLayers.Strategy.Fixed()],
    styleMap: new OpenLayers.StyleMap({
        "default": layer1Style
    })
});
map.addLayer(layer1);

var layer2Style = ...
var layer2 = ...
map.addLayer(layer2);

// and so on

有没有办法将这些每层样式提取到CSS文件中？我真的不想在JS中为每一层声明这些内联-CSS/LESS在抽象这些方面要好得多

请注意，这是一个伪代码段-实际代码更复杂，并使用异步API调用动态创建层

我目前正在使用OL2.13.x

---

类似，但处理的是不同的、非常具体的场景。

您可以使用css解析器为您的层样式生成JSON数据。是一个很好的css解析库。我已经使用JSCSSP为您的问题编写了一个小包装器类

在解析器类的构造函数中，使用XMLHttpRequest和 使用CSSParser.parse（）解析css数据

向解析器类添加一个方法，该类在css文件中搜索给定的规则名称，并从该规则生成json数据

Parser.prototype.parse = function(element)
{
  var result = {};

  var rules = this.sheet.cssRules;
  for (var i = 0; i < rules.length; i++) 
  {      
    if (rules[i].mSelectorText == element )
    {
      for (var j = 0; j < rules[i].declarations.length; j++)   
      {
        var value = rules[i].declarations[j].valueText;

        if (isNaN(Number(value)))            
          result[rules[i].declarations[j].property] = value;
        else
          result[rules[i].declarations[j].property] = Number(value);

      }   
    }
  }
  return result;      
}

javascript文件

var parser = new Parser("test.css");

var layer1 = new OpenLayers.Layer.Vector("Layer 1", {
  strategies: [new OpenLayers.Strategy.Fixed()],
  styleMap: new OpenLayers.StyleMap({
    "default": new OpenLayers.Style(parser.parse("#layer1"))
  })
});

您可以将parse方法的返回值更改为

return new OpenLayers.Style(result); 

在构建像这样的OpenLayers层时使用更清晰的语法

"default": parser.parse("#layer1")

---

不要忘记包括JSCSSP

对于我的场景来说，这可能太复杂了。我会等一等，看看还有没有其他更简单的答案。

return new OpenLayers.Style(result); 

"default": parser.parse("#layer1")