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

这个问题的一个问题是，由于填充是不透明的，这意味着您可以看到填充下方的笔划的轻微轮廓。但如果填充量很稳定，这不会成为一个问题。不完美，但我可以继续前进。

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

2 个答案: