Paying Attention to Overlapping in Text Marking when using openLayers ol.style.Style by javascript?

Question

The vector layer is geojson format by geoserver server. When I use ol.style.Text to marking the volume_ab filled, the overlapping occured.

textRender_ab = feature.get("volume_ab");
textRender_ba = feature.get("volume_ba");

//定义默认显示样式
var defaultStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#8B8B7A',
    width: 5
  }),
  image: new ol.style.Circle({
    radius: 4,
    fill: new ol.style.Fill({
      color: 'black'
    }),
    stroke: new ol.style.Stroke({
      color: 'black'
    })

  })
})

var level = feature.get("them_vc");
// console.log(feature.get("them_vc").length);
// console.log(level);
if (!level && !vcLevels[level]) {
  return defaultStyle;
}

for (var key in vcLevels) {
  if (level == key) {
    style_ab = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 4,
        fill: new ol.style.Fill({
          color: 'black'
        }),
        stroke: new ol.style.Stroke({
          color: 'black'
        })
      }),
      stroke: new ol.style.Stroke({
        color: vcLevels[level],
        width: vcWideth[level]
      }),
      text: new ol.style.Text({
        font: "12px YaHei",
        text: textRender_ab.toString(),
        fill: new ol.style.Fill({
          color: 'black'
        }),
        rotation: 0,
        scale: 1,
        offsetX: 10,
        offsetY: 10
      })
    });
    style_ba = new ol.style.Style({
      text: new ol.style.Text({
        font: "12px YaHei",
        text: textRender_ba.toString(),
        fill: new ol.style.Fill({
          color: 'black'
        }),
        rotation: 0,
        scale: 1,
        offsetX: -10,
        offsetY: -10
      })
    });
    return [style_ab, style_ba];

impression drawing shows：

Answer 1

You would need to create a cluster layer and use that to build up a single text string separated by a newline (or a space if you prefer) for labels which would otherwise overlap. Style the resulting text in the cluster layer, and style only the geometry in the main layer. The code would look something like this:

var layerStyle = function(feature) {

  var defaultStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#8B8B7A',
      width: 5
    }),
    image: new ol.style.Circle({
      radius: 4,
      fill: new ol.style.Fill({
        color: 'black'
      }),
      stroke: new ol.style.Stroke({
        color: 'black'
      })
    })
  });

  var level = feature.get("them_vc");
  if (!level || !vcLevels[level]) {
    return defaultStyle;
  }

  for (var key in vcLevels) {
    if (level == key) {
      var style_ab = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 4,
          fill: new ol.style.Fill({
            color: 'black'
          }),
          stroke: new ol.style.Stroke({
            color: 'black'
          })
        }),
        stroke: new ol.style.Stroke({
          color: vcLevels[level],
          width: vcWideth[level]
        })
      });
      return [style_ab];
    }
  }

}


var clusterStyle = function(cluster) {

  var text_ab = '';
  var text_ba = '';

  cluster.get('features').forEach( function(feature) {
    var level = feature.get("them_vc");
    if (level && vcLevels[level]) {
        text_ab += feature.get("volume_ab").toString() + '\n';
        text_ba += feature.get("volume_ba").toString() + '\n';
    }
  });

  var style_ab = new ol.style.Style({
      text: new ol.style.Text({
        font: "12px YaHei",
        text: text_ab,
        fill: new ol.style.Fill({
          color: 'black'
        }),
        rotation: 0,
        scale: 1,
        offsetX: 10,
        offsetY: 10
      })
    });
  var style_ba = new ol.style.Style({
      text: new ol.style.Text({
        font: "12px YaHei",
        text: text_ba,
        fill: new ol.style.Fill({
          color: 'black'
        }),
        rotation: 0,
        scale: 1,
        offsetX: -10,
        offsetY: -10
      })
    });
    return [style_ab, style_ba];
}


var mainLayer = new ol.layer.Vector({
  source: layerSource,
  style: layerStyle
});

var clusterLayer = new ol.layer.Vector({
  source: new ol.source.Cluster({
    distance: 10,
    source: layerSource,
    geometryFunction: function(feature) {
      switch (feature.getGeometry().getType()) {
        case 'Point':
          return feature.getGeometry();
        case 'LineString':
          return new ol.geom.Point(feature.getGeometry().getCoordinateAt(0.5));
        case 'Polygon':
          return feature.getGeometry().getInteriorPoint();
        default:
      }
    }
  }),
  style: clusterStyle
});

Answer 2

添加语句declutter: true在每个矢量层之后为declutter: true ，它可以完美工作。