在CSS中使用OpenLayers中的矢量图层样式

Question

我正在使用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调用来即时创建图层。

我目前使用的是OL 2.13.x.

This question是类似的，但处理不同的，非常具体的情况。

Answer 1

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

在解析器类的构造函数中，使用XMLHttpRequest获取对css文件的请求，并使用CSSParser.parse（）解析css数据。

function Parser(url) 
{ 
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.open("GET", url, false); 
    xmlHttp.send(); 

    this.cssData = xmlHttp.responseText; 
    var cssParser = new CSSParser(); 
    this.sheet = cssParser.parse(this.cssData, false, true); 
} 

添加的方法，其搜寻SEARCH_TERM_EXAMPLES在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;  
} 

用法示例：

test.css

#layer1{ 
    strokeColor: blue; 
    strokeWidth: 2; 
    strokeOpacity: 0.8; 
} 

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")) 
    }) 
}); 

您可以更改解析方法的返回值

return new OpenLayers.Style(result); 

有一个更清晰的语法，而构建的OpenLayers层这样

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

不要忘了包括JSCSSP javascript file。