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调用来动态创建图层。

我目前正在使用OL 2.13.x。

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

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

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

return new OpenLayers.Style(result);

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

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

不要忘记包含JSCSSP javascript file。

在OpenLayers中使用CSS进行矢量图样式设置

1 个答案: