Search code examples
openlayers

Select Feature creates random graphical artifacts in the edges of other features of the same layer

in my project I have integrated a simple control to select the features.

var select = new ol.interaction.Select({});
map.addInteraction(select);

But when I use it, graphic artifacts occur on the border of the other features of the same layer, not subject to selection (the border thickens only in some features).

How can I fix?

My layers are GeoJSON and an example project with openlayers 6.15.1 is posted here. Thank you.

Example Example 1

Solution

  • The help received so far in the comments assume that the problem is the geojson set as multipolygon, however investigating I understood that the problem is the style of the layers. Layers with width:0 have the problem, layers with width other than 0 do not have the problem.

    This layer style have a problem:

    new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(35,35,35,1.0)',
lineDash: null,
lineCap: 'butt',
lineJoin: 'miter',
width: 0})

    For now I've worked around the problem by setting the style of the selection to width: 0 (like in layers) and showing a fill. Like this:

    var highlightStyle = new ol.style.Style({                           
        fill: new ol.style.Fill({
          color: 'rgba(0,153,255,0.5)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(0,153,255,1)',
          width: 0
        }),                         
})      

var select = new ol.interaction.Select({
        style: highlightStyle
        });
        map.addInteraction(select);

    But why all this happens is still a mystery.