Javascript 如何停止多边形笔划样式重叠多边形填充

我在

ol3

中有一个向量多边形，我正在用彩色填充和白色笔划为多边形轮廓设置样式

new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#ffffff',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(241, 135, 0, 0.7)'
        })
      })

在更高分辨率下，此样式很好，笔划和填充定义良好：

但缩小意味着笔划会侵犯填充，最终它们会重叠并隐藏填充：

我认为这是由于笔画被画在多边形的中间，所以它的一半在外面，一半在多边形里面，因此当缩小一半的内部填充多边形时隐藏了填充。

我希望多边形仅在多边形外部绘制线：更像着色。我已经尝试过各种选择，但还没有完全做到

---

是否有人知道可以实现这一点的设置，而无需在地图上缩小时动态缩小笔划宽度或隐藏笔划。

使用样式函数，并使用作为样式函数参数传递的分辨率更改笔划样式

检查此代码剪报：

var style = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.6)'
  }),
  stroke: new ol.style.Stroke({
    color: '#319FD3',
    width: 1
  }),
  text: new ol.style.Text({
    font: '12px Calibri,sans-serif',
    fill: new ol.style.Fill({
      color: '#000'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    })
  })
});



var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'https://openlayers.org/en/v3.19.0/examples/data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  }),
  style: function(feature, resolution) {
    if(resolution < 5000 ) { //adjust the resolution to fit your needs
    style.stroke_.setWidth(5); //change the stroke depending on resolution
    } else {
    style.stroke_.setWidth(1);//reset it back
    }
    return style; //and return  it
}
});

var style=new ol.style.style({
填充：新的ol.style.fill({
颜色：“rgba（255，255，255，0.6）”
}),
笔划：新的ol风格笔划({
颜色：“#319FD3”，
宽度：1
}),
文本：新的ol.style.text({
字体：“12px Calibri，无衬线”，
填充：新的ol.style.fill({
颜色：“#000”
}),
笔划：新的ol风格笔划({
颜色：“#fff”，
宽度：3
})
})
});
var vectorLayer=新ol.layer.Vector({
来源：新ol.source.Vector({
网址：'https://openlayers.org/en/v3.19.0/examples/data/geojson/countries.geojson',
格式：new ol.format.GeoJSON（）
}),
样式：功能（特征、分辨率）{
如果（分辨率<5000）{//调整分辨率以满足您的需要
style.stroke_uu.setWidth（5）；//根据分辨率更改笔划
}否则{
style.stroke_u.setWidth（1）；//将其重置回
}
return style；//并返回它
}
});

---

为了查看它的实际效果

为了克服这个问题，我没有将多边形样式设置为一个包含填充和笔划的单一样式，而是将多边形样式设置为一个样式数组，第一个样式作为笔划，第二个样式作为填充，因此按此顺序绘制意味着填充也将位于笔划的顶部，当缩小时，表示填充仍然可见且不重叠

 [new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#ffffff',
      width: 4
    })
  }), new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(241, 135, 0, 0.7)'
    })
  })]

第一个问题是，由于填充不透明，这意味着您可以看到填充下方笔划的轻微轮廓。但是如果填充物是实心的，这就不是问题了。不完美，但我可以继续前进