如何停止多边形笔触样式重叠的多边形填充

Question

我在ol3中有一个矢量多边形， ol3多边形的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)'
        })
      })

在更高的分辨率下，此样式很好，并且笔触和填充定义明确：

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

我认为这是由于笔划绘制在多边形的线的中间，所以笔画的一半在多边形的外面，一半在多边形的内部，因此当缩小一半时，填充多边形的对象将隐藏填充。

我希望多边形仅在多边形的外部绘制线条：更像是阴影。 我玩过这些选项，但还没有完全解决。

没有人知道可以实现此目的的设置，而无需在缩小地图时诉诸于动态减小笔划的宽度或隐藏笔划。

Answer 1

使用样式函数并使用作为参数传递给样式函数的分辨率来更改笔触样式。

检查以下代码片段：

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
}
});

这是一个摆弄它的小提琴

Answer 2

为了解决此问题，而不是将多边形样式设置为具有填充和描边的单一样式，我将多边形样式设置为样式的数组，其中第一个为描边，第二个为填充，以便按此顺序绘制表示填充也将在笔划的顶部，并且在缩小时表示填充仍然可见并且没有重叠。

 [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)'
    })
  })]

第一个问题是由于填充不透明，这意味着您可以在填充下方看到笔触的轻微轮廓。 但是，如果填充牢固，则不会有问题。 不完美，但我可以继续。