OpenLayers 5 and GeoJSON with two geometry attributes per feature

Question

I have a GeoJSON file in which each feature has two geometry attributes, one is the default geometry property defined by the GeoJSON standar, and the other one is a property under the standarized properties entry. My intention is, render each geometry with a different style.

Following you can find an example of a GeoJSON feature, and the attempt to define the OpenLayers style.

{
"type": "FeatureCollection",
"crs": {
    "type": "name",
    "properties": {
        "name": "CRS:84"
    }
},
"features": [
    {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -13.7331,
                        43.0833
                    ],
                    [
                        -12.6167,
                        41.85
                    ],
                    [
                        -19.7833,
                        37.8833
                    ],
                    [
                        -20.9333,
                        39.0333
                    ],
                    [
                        -13.7331,
                        43.0833
                    ]
                ]
            ]
        },
        "properties": {
            "type": "StaticAre",
            "name": "nameValue",
            "test-attr1": "test-attr1",
            "geom_alt": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -13.7333,
                            43.0833
                        ],
                        [
                            -12.6167,
                            41.85
                        ],
                        [
                            -19.7833,
                            37.8833
                        ],
                        [
                            -20.9333,
                            39.0333
                        ],
                        [
                            -13.7333,
                            43.0833
                        ]
                    ]
                ]
            }
        },
        "id": "6764"
    }
]

}

var style = [
new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'red',
        width: 2
    })
}),
new ol.style.Style({
    geometry: 'geom_alt',
    stroke: new ol.style.Stroke({
        color: 'green',
        width: 2
    })
})
];

I think that the problem is related with that openlayers does not identified the 'geom_alt' property as a geometry.

Do you know if there is a way of doing this?

Answer 1

'geom_alt' is a string. Use a style function to read the properties of the features into a geometry in projection coordinates

var style = function(feature) {
    return [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 2
            })
        }),
        new ol.style.Style({
            geometry: new ol.format.GeoJSON().readGeometry(
                feature.get('geom_alt'), {
                    dataProjection: 'EPSG:4326',
                    featureProjection: map.getView().getProjection()
                }
            ),
            stroke: new ol.style.Stroke({
                color: 'green',
                width: 2
            })
        })
    ];
}