使用OpenLayers与矢量瓦片时如何实现要素标签去重

我有一张展示网格的地图，每个矩形都配有标签。但当矩形被分割到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");

当前效果 #

解决方案 #

核心思路是仅在包含矩形几何中心的瓦片上渲染标签，以下是两种可行实现方式：

方法一：基于可视范围的简化判断 #

在样式函数中计算矩形几何中心，判断该中心是否落在当前视图的可视范围内，满足条件才显示标签。同时注意不要共享Style实例，避免样式污染：

function styleFunction(feature, resolution) {
    // 计算标签内容与字体大小
    var fontSize = Math.max(8, Math.round(180 / resolution)).toString();
    var text = Math.round(parseFloat(feature.get("ceil")) * 0.3048).toString();

    // 创建新样式实例（避免复用导致的样式冲突）
    var style = 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: fontSize + "px sans-serif",
            text: "",
            fill: new ol.style.Fill({ color: [255, 0, 0, 1] }),
            stroke: null,
            offsetX: 0,
            offsetY: 0
        })
    });

    // 获取矩形几何中心
    var center = feature.getGeometry().getCenter();
    // 获取当前视图可视范围
    var viewExtent = map.getView().calculateExtent(map.getSize());

    // 仅当中心在可视范围内时显示标签
    if (ol.extent.containsCoordinate(viewExtent, center)) {
        style.getText().setText(text);
    }

    return style;
}

方法二：基于瓦片范围的精准判断 #

如果需要更精准的瓦片级控制，可结合地图render事件获取当前渲染的瓦片范围，再判断矩形中心是否在该范围内：

// 存储当前渲染的瓦片范围
var currentTileExtents = [];

map.on('render', function(event) {
    currentTileExtents = [];
    var frameState = event.frameState;
    if (frameState && frameState.layerStatesArray) {
        frameState.layerStatesArray.forEach(function(layerState) {
            if (layerState.layer === yourGridLayer) { // 替换为你的网格图层实例
                frameState.walkTiles(function(tile) {
                    currentTileExtents.push(tile.getExtent());
                }, layerState);
            }
        });
    }
});

function styleFunction(feature, resolution) {
    // 基础样式与标签计算逻辑同方法一
    var fontSize = Math.max(8, Math.round(180 / resolution)).toString();
    var text = Math.round(parseFloat(feature.get("ceil")) * 0.3048).toString();

    var style = 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: fontSize + "px sans-serif",
            text: "",
            fill: new ol.style.Fill({ color: [255, 0, 0, 1] }),
            stroke: null,
            offsetX: 0,
            offsetY: 0
        })
    });

    var center = feature.getGeometry().getCenter();
    var showLabel = false;

    // 判断中心是否在当前渲染的任意瓦片范围内
    currentTileExtents.forEach(function(extent) {
        if (ol.extent.containsCoordinate(extent, center)) {
            showLabel = true;
        }
    });

    if (showLabel) {
        style.getText().setText(text);
    }

    return style;
}

关键注意事项 #

• 禁止复用同一个ol.style.Style或ol.style.Text实例，每次样式函数调用都创建新实例，避免多要素样式互相覆盖。
• 可根据分辨率添加额外判断，比如低缩放级别下隐藏标签，避免界面拥挤。

内容的提问来源于stack exchange，提问作者user3523426