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

Question

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

3

我正在使用OpenLayers来显示基于一些API调用的多个矢量图层。目前，我使用每个图层的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。

这个问题类似于此问题，但处理的是不同的、非常具体的情况。

- metacubed

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alper Cinar · Accepted Answer

你可以使用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);  
}

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