在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。