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

Question

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

和here is a fiddle查看实际效果

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

第一个问题是，由于填充是不透明的，这意味着您可以看到填充下方描边的轻微轮廓。但如果填充物是固体，这将不是问题。不完美，但我可以继续前进。

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

How to stop polygon stroke style overlapping polygon fill

javascript

openlayers-3