1

Styles for rendering features in OpenLayers 3 are defined as:

new ol.style.Style({
  image: new ol.style.Circle({
    radius: 6,
    stroke: new ol.style.Stroke({
      color: 'white',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'green'
    })
  })
})

I would like to define my styles in JSON file, not in code. Is there any way how to load styles from JSON? I could easily load attributes like "color" : "green", but I cannot load something like new ol.style.Fill...

3 Answers 3

2

As far as I know, OL3 does not provide that. You have to define your own json structure and write a function to read that json and apply it to the layer.

GeoExt 3 provides a very nice getSerializedLayers that encodes the data and the style in one json. To print a OL3 vector layer with MapFish, you need to pass the features and the style to MapFish. With GeoExt 3, you do:

var util = GeoExt.data.MapfishPrintProvider;
var serializedLayers = util.getSerializedLayers(
    olMap,
    function (layer) {
        return (layer.get('title') == 'Detail');
    }
);

The resulting json looks like this (without the features):

{
    geoJson: {
        features: [ (...) ],
        type: "FeatureCollection"
    },
    type: "geojson",
    style: {
        version: 2,
        "[dominio = 'PLANTA ORDENAMENTO']": {
            symbolizers: [
                {
                    type: "polygon",
                    fillColor: "#ff9900",
                    fillOpacity: 0.4,
                    strokeColor: "#ff9900",
                    strokeOpacity: 1,
                    strokeWidth: 2 // , strokeDashstyle: "dot"
                }
            ]
        },
        "[dominio = 'LOTEAMENTO']": {
            symbolizers: [
                {
                    type: "polygon",
                    fillColor: "#cc00cc",
                    fillOpacity: 0.4,
                    strokeColor: "#cc00cc",
                    strokeOpacity: 1,
                    strokeWidth: 2 // , strokeDashstyle: "dot"
                }
            ]
        }
    }
}

This is an example of the MapFish style syntax (including conditional styling).

For you application, you can use the MapFish style syntax, for example, and write the inverse of the GeoExt 3 getSerializedLayers function. It is just a suggestion for your problem, not an really a answer.

4
  • Thanks! I meanwhile wrote some own simple parser, but it is a great idea to use already existing style syntax. Commented Nov 19, 2016 at 20:19
  • @jgrocha do we need to import any modules before being able to use that method? I'm getting error "Couldn't find a suitable serializer for source. Did you require() an appropriate serializer class?" from the ext-all-rtl-debug.js utilitary upon using it.
    – user25976
    Commented Jul 25, 2019 at 18:38
  • @user25976 What type of layer are you trying to serialize? There are serializers for a few kind of layers, but not for all types.
    – jgrocha
    Commented Jul 26, 2019 at 9:42
  • @jgrocha VectorTile and OSM base map
    – user25976
    Commented Jul 26, 2019 at 20:17
2

Have a look at this gist: https://gist.github.com/pagameba/671d63f7ee95e4ebe44b

This code is supposed to be able to create OL3 Style object(s) from object literals.

0

In my experience, the closest you can get -natively- to persisting style info, whether in a database, or config file, is to store the options property for the Style as a JSON string.

For example, myStyle.json file might look like this:

{"LONG_RANGE_RADAR": {
"crit":{
    "fill":{"color":"rgba(255,255,255,0.4)"},
    "stroke":{"color":"#3399CC","width":1.25} 
},
"warn":{
    "fill":{"color":"rgba(255,255,255,0.4)"},
    "stroke":{"color":"#3399CC","width":1.25} 
}}

This will get you half way to completely persisting an entire openlayers Style object.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.