在OpenLayers中將CSS用於矢量層樣式

Question

我正在使用OpenLayers基於某些API調用顯示多個Vector層。 目前，我為每個圖層使用StyleMap-Style組合為這些圖層設置樣式，如下所示：

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。

這個問題很相似，但是處理的是不同的，非常具體的情況。

Answer 1

您可以使用CSS解析器並為您的圖層樣式生成JSON數據。 JSCSSP是一個很好的解析css的庫。 我使用JSCSSP為您的問題編寫了一個小型包裝器類。

在Parser類的構造函數中，使用XMLHttpRequest向CSS文件發出get請求，並使用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);  
}

在Parser類中添加一個方法，該方法在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"))
  })
});

您可以將parse方法的返回值更改為

return new OpenLayers.Style(result); 

在構造這樣的OpenLayers層時具有更簡潔的語法

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

不要忘記包含JSCSSP javascript文件 。