javascript - Use CSS for Vector Layer styling in OpenLayers -

I am using OpenLayers to show multiple vector layers based on some API calls. Currently, I give these layers a stylemap-style combination for each layer, such as:

  var Layer 1 style = new OpenLayer Style ({stroke color: "blue", strokeview: 2, stroke opacity: 0.8}); Var Layer 1 = New Open Layer Layers Vector ("Layer 1", {Strategies: [New OpenLeary Streets. Fixed], Stylemap: New Open Layer. Style Map ({"Default": Layer 1 Style}}}); Map.addLayer (Layer1); Var layer 2 style = ... var layer2 = ... map.addLayer (layer2); // and so on  

Is there any way to drag these per-layer styles into the CSS file? I really do not want to declare these layers in JS for every layer - CSS / Less is far better in integrating them.

Note that this is a dummy snippet - the actual code is more complex and uses async

I am currently using OL 2.13.x.

is similar, but related to a different, very specific scenario.

/ div>

You can use a CSS parser and generate JSON data for your layer style You can. There is a good library for parsing CSS. I have written a small cover class to use JSCSSP for your problem.

In the manufacturer of a parser class, get a request for the CSS file using XMLHttpRequest and parse CSS data with CSSParser.parse ().

Function Parser (URL) {var xmlHttp = New XMLHttpRequest (); XmlHttp.open ("GET", url, false); XmlHttp.send (); This.cssData = xmlHttp.responseText; Var cssprs = new css parser (); This.sheet = cssParser.parse (this.cssData, incorrect, true); }

Add a method for the Parser class that searches for the rule name given in the CSS file and creates Jason data from that rule.

Parser.protitip.from = function (element) {var result = {}; Var rule = this.sheet.cssRules; (Var i = 0; i & lt; rules.length; i ++) {if (rule [i] .mSelectorText == element) {for (var j = 0; j & lt; rule [i]. Declarations.length; j ++) {var value = rule [i] .declarations [j] .valueText; If (isNaN (number (value)) results [rule [i] .declarations [j] .property] = value; And the results [rule [i] .declarations [j] .property] = number (value); }}} Return result; }

example usage:

test.css

  # layer 1 {stroke color: blue ; Strokewidth: 2; Stroke Opacity: 0.8; }  

Javascript file

  var parser = new parse ("test.css"); Var Layer 1 = New Open Layer Layers Vector ("Layer 1", {Strategies: [New OpenLeary Streets, Fixed], Stylemap: New Open Layer. Style Map ({"Default": New Open Layer Style (Parser. "# Layer 1")) })});  

You can change the return value of the parsing method

  Return to the new open layer. Style (result);  
  "default": parser.parse ("# layer1")   
 
 A cleaner while creating an open layer layer like this To create syntax  

Do not forget to include JSCSSP