OpenLayers 文本标签即使有填充也会重叠

Question

Ol 文档指出可以在文本标签上使用 Padding 来整理。 ol/style/Text,

然而，即使我指定填充，我的标签仍然重叠。

codepen 上的实例：https://codepen.io/sjvmarigerr/pen/oNNVMXb?editors=1010

样式函数：

  function styleFunction (feature) {
   return new ol.style.Style({
      text: new ol.style.Text({
        text: feature.get('PORT_NAME'),
        padding: [3, 3, 3, 3],
        font: "bold 15px sans-serif"
    })
  });};

Answer 1

由于缩放级别，我真的看不出它不会重叠的方式，但为了使其更明显，您可以尝试下面的示例。

https://codepen.io/gpproton/pen/gOOEjJj?editors=1010

function styleFunction (feature) {
       return new ol.style.Style({
          text: new ol.style.Text({
            text: feature.get('PORT_NAME'),
            padding: [3, 3, 3, 3],
            font: "bold 11px sans-serif",
            stroke: new ol.style.Stroke({
              color: '#ffffff',
              width: 1
            }),
            fill: new ol.style.Fill({
              color: '#000'
            })
        })
      });
};

Answer 2

您尝试过整理选项吗？？？如果不试一试，它可能会解决您的问题。为此，请将您的矢量图层配置替换为：

var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
      });

为此：

var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction,
        declutter: true
      });

请记住，如果重叠，整理应该隐藏标签，并且当缩放级别足以不重叠时将显示标签。

OpenLayers 文本标签即使有填充也会重叠

OpenLayers text label overlap even with padding

gis

openlayers