Обращаете ли вы внимание на перекрытие в текстовой маркировке при использовании openLayers ol.style.Style by javascript?

Question

Векторный слой в формате geojson на сервере геосерверов. Когда я использую ol.style.Text для маркировки заполненного volume_ab, произошло перекрытие.

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];

оттиск рисунка показывает:

Answer 1

Добавьте оператор declutter: true после каждого векторного слоя, он отлично работает.

Answer 2

Вам понадобится создать кластерный слой и использовать его для создания одной текстовой строки, разделенной новой строкой (или пробелом, если вы предпочитаете) для меток, которые в противном случае перекрывались бы. Стиль результирующего текста в кластерном слое и стиль только геометрии в основном слое. Код будет выглядеть примерно так:

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