您可以使用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。
这可能对我的场景来说太复杂了。我会稍等一下,看看是否还有其他更简单的答案。 – metacubed 2014-11-04 21:18:44