2

I am building a style to work with vector tiles.

My road geometries are many linestrings in a single layer.

I want to style the roads by rendering a casing, fill and centreline from one geometry.

I have a style that looks like:-

 var style = function(feature,resolution) {

        var line_casing_stroke = new ol.style.Stroke({color : '', width : 1, lineCap : 'round'}),
            line_fill_stroke = new ol.style.Stroke({color : '', width : 1, lineCap : 'round'});

        var style_array = [], length = 0;

            if (properties.layer == 'roads') {

                line_casing_stroke.setWidth(5);
                line_casing_stroke.setColor(colour_map.road.casing);
                line_fill_stroke.setWidth(4);
                line_fill_stroke.setColor(colour_map.road.fill);

                style_array[length++] = line_casing;
                style_array[length++] = line_fill;
        }

        return style_array;
 }

This creates a result as shown in the picture below which I think is caused by the lineCap: round in the casing style making the geometry a little but longer. Is there a way to get round this or a better approach? Note that I CANNOT join the geometries in the vector tiles.

enter image description here

1 Answer 1

1

Turns out to be a simple fix. Styles can have a zIndex

var line_casing_stroke = 
new ol.style.Stroke({color : '', width : 1, lineCap : 'round', zIndex: 0 }),
line_fill_stroke = 
new ol.style.Stroke({color : '', width : 1, lineCap : 'round', zIndex: 1});
1
  • Isn't the zIndex is a property of the Style, not the Stroke? Jun 20, 2020 at 2:20

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.