时间戳

首页 > 解决方案 > OpenLayers - 矢量标签未显示在小特征上

label - OpenLayers - 矢量标签未显示在小特征上

问题描述

我有一个项目，我使用 Openlayers 来显示功能。在我的每个功能之上，我显示了一个包含该特定功能描述的标签。

我注意到在细特征上没有显示矢量标签。我不知道为什么会发生这种情况，因为我从未设置不应显示文本的值。

这是我用来设置每个特征的样式和矢量标签的函数：

style: (feature) => {
      return new Style({
        fill: new Fill({ color: 'rgba(43, 146, 190, 0.4)' }),
        stroke: new Stroke({
          width: 3,
          color: 'rgba(43, 146, 190, 1)',
        }),
        text: new Text({
          font: '13px Calibri,sans-serif',
          fill: new Fill({ color: '#fff' }),
          stroke: new Stroke({
            color: '#000',
            width: 2,
          }),
          text: feature.get('description'),
        }),
      });
    },

在这里，您可以看到为大多数特征设置了标签，除了那些很小或很薄的特征。

在此处输入图像描述

标签： labelopenlayers

解决方案

我已经找到了解决方案。为了在小特征或细特征上显示标签，您需要将overflow文本对象的值设置为true。

所以基于特征生成标签的函数应该如下：

    style: (feature) => {
      return new Style({
        fill: new Fill({ color: 'rgba(43, 146, 190, 0.4)' }),
        stroke: new Stroke({
          width: 3,
          color: 'rgba(43, 146, 190, 1)',
        }),
        text: new Text({
          font: '13px Calibri,sans-serif',
          fill: new Fill({ color: '#fff' }),
          stroke: new Stroke({
            color: '#000',
            width: 2,
          }),
          text: feature.get('description'),
          overflow: true,
        }),
      });
    },

推荐阅读