javascript 使用 openLayers ol.style.Style 时注意文本标记中的重叠？

Question

矢量图层是geoserver服务器的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

您需要创建一个集群层，并使用它来为标签构建一个由换行符（或者 space 如果您愿意）分隔的文本字符串，否则标签会重叠。在群集层中设置生成的文本的样式，并仅在主层中设置几何图形的样式。代码看起来像这样：

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，效果完美。

javascript 使用 openLayers ol.style.Style 时注意文本标记中的重叠？

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

javascript

openlayers