OpenLayers export features with their styles

Question

I'm trying to export features and then load them to map Already I can save features and re-create them by Geojson object.

the problem is that GeoJson dosen't save feature's style.
what is the best way to save styles and load them with features?

Answer 1

You can use below codes to save and load geojson file with styles.

add the following line to the header

<script src=" https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script> <!-- we will use it to download the geojson file -->

Then add the following function to the code.

function saveMap() {
    var mapLayers = map.getLayers().getArray();
    var features = [];
    mapLayers.forEach(function(layer) {

        if (layer instanceof ol.layer.Vector) {
            var layerFeatures = layer.getSource().getFeatures();
            layerFeatures.forEach(function(feature) {
                feature.setProperties(layer.getStyle()) //add the layer styles to the feature as properties
                features.push(feature);
            });
        }
    });
    var geojsonFormat = new ol.format.GeoJSON();
    var geojsonString = geojsonFormat.writeFeatures(features, {
        featureProjection: map.getView().getProjection()
    });
    var blob = new Blob([geojsonString], {
        type: 'text/plain'
    });
    saveAs(blob, 'map.geojson');
}

Load the map again with the styles in OpenLayers:

// Use jQuery to read the GeoJSON file
$.getJSON("map.geojson", function(data) {
    var geojson = new ol.format.GeoJSON({
        dataProjection: "EPSG:4326",
        featureProjection: 'EPSG:3857'
    }).readFeatures(data);


    var vectorSource = new ol.source.Vector({
        features: geojson,
        wrapX: false
    });

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
    })
    // Iterate through the features in a vector layer
    vectorLayer.getSource().forEachFeature(function(feature) {
        // Take the style  of the feature as a variable
        var fill_color = feature.values_[0].fill_.color_;
        var stroke_color = feature.values_[0].stroke_.color_;
        var stroke_width = feature.values_[0].stroke_.width_;

        // Create a style object 
        var style = new ol.style.Style({

            stroke: new ol.style.Stroke({
                color: stroke_color,
                width: stroke_width
            }),
            fill: new ol.style.Fill({
                color: fill_color
            })
        });
        // Add the style to the feature
        feature.setStyle(style);
    });
    map.addLayer(vectorLayer);

});

You can view the full code of the following links

ol-save-geojson.html

ol-read-geojson-styles.html