如何在使用 OpenLayers 和矢量切片时删除重复的要素标签

Question

我有一张地图，在其中显示网格。每个矩形都有一个标签。不幸的是，当一个矩形被分割为 2 个或多个图块时，其标签会显示在每个图块上。有没有办法让标签只显示一次并显示在分割矩形的中间？

我的风格定义为

new ol.style.Style({
        fill: new ol.style.Fill({ color: [0xfb, 0x7f, 0x7f, 0.7] }),
        stroke: new ol.style.Stroke({ color: "#ff0000", width: 1 }),
        text: new ol.style.Text({
            textAlign: "center",
            textBaseline: "middle",
            font: "15px sans-serif",
            text: "",
            fill: new ol.style.Fill({ color: [255, 0, 0, 1] }),
            stroke: null,
            offsetX: 0,
            offsetY: 0
        })
    })

我在样式函数中定义标签，如下所示：

var fontSize = Math.max(8, Math.round(180 / resolution)).toString();

var text = Math.round(parseFloat(feature.get("ceil")) * 0.3048).toString();

style.getText().setText(text);
style.getText().setFont(fontSize + "px sans-serif");

结果是这样的：

Answer 1

您的多边形看起来像间隔为 15 秒（15/3600 度）的地图刻度线。

如果是这种情况，您可以将样式拆分为数组：

var polyStyle =  new ol.style.Style({
        fill: new ol.style.Fill({ color: [0xfb, 0x7f, 0x7f, 0.7] }),
        stroke: new ol.style.Stroke({ color: "#ff0000", width: 1 }),
    });

var textStyle =  new ol.style.Style({
        text: new ol.style.Text({
            textAlign: "center",
            textBaseline: "middle",
            font: "15px sans-serif",
            text: "",
            fill: new ol.style.Fill({ color: [255, 0, 0, 1] }),
            stroke: null,
            offsetX: 0,
            offsetY: 0
        });

[polyStyle, textStyle]

然后在样式函数中，您可以根据多边形的位置计算标签应位于该网格内的位置，即使您只有多边形的一部分：

var fontSize = Math.max(8, Math.round(180 / resolution)).toString();
var text = Math.round(parseFloat(feature.get("ceil")) * 0.3048).toString();
var center = ol.proj.toLonLat(ol.extent.getCenter(feature.getExtent()));
var interval = 15 / 3600;
var labelLon = Math.floor(center[0] / interval) * interval + interval / 2;
var labelLat = Math.floor(center[1] / interval) * interval + interval / 2;

textStyle.getText().setText(text);
textStyle.getText().setFont(fontSize + "px sans-serif");
textStyle.setGeometry(
  new ol.geom.Point(ol.proj.fromLonLat([labelLon, labelLat]))
);