使用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

您將需要創建一個群集層，並使用它來構建單個文本字符串，該文本字符串用換行符（或空格，如果需要）分隔，以防標簽重疊。 在簇圖層中設置結果文本的樣式，並在主圖層中僅設置幾何的樣式。 代碼看起來像這樣：

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 ，它可以完美工作。