OpenLayers 6.x：给LineString中部添加单次可点击文本的实现方法

一、解决文本重复并居中显示 #

默认情况下OpenLayers会沿LineString重复绘制文本，要实现仅在中部显示一次文本，可通过样式函数动态计算线条中点定位文本，具体修改如下：

const feature = new Feature({
  geometry: lineString,
  name: 'Line'
});

// 替换原固定样式为动态样式函数
feature.setStyle((feature) => {
  const geometry = feature.getGeometry();
  // 获取LineString的中点坐标（0.5表示取线条50%位置的点）
  const midPoint = geometry.getCoordinateAt(0.5);

  return new Style({
    stroke: new Stroke({
      color: '#EE360F',
      width: 5
    }),
    text: new Text({
      text: "test",
      font: '6px "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif',
      fill: new Fill({ color: 'black' }),
      stroke: new Stroke({ color: 'black', width: 1 }),
      placement: 'point', // 以点模式放置文本，避免沿线条重复
      textAlign: 'center',
      textBaseline: 'middle',
      offsetY: -10, // 可选：调整文本与线条的垂直间距，避免重叠
      repeat: Infinity, // 彻底禁止文本重复
      // 将文本绑定到线条中点的Point几何
      geometry: new Point(midPoint)
    })
  });
});

二、实现文本可点击并绑定操作逻辑 #

文本属于Feature样式的一部分，点击文本会触发Feature的交互检测，只需给地图绑定点击事件，判断点击对象后执行已有逻辑即可：

// 给地图添加点击事件监听
this.map.on('click', (evt) => {
  // 获取点击位置对应的Feature
  const clickedFeature = this.map.forEachFeatureAtPixel(evt.pixel, (feature) => feature);
  // 判断是否为目标LineString Feature
  if (clickedFeature && clickedFeature.get('name') === 'Line') {
    // 执行你的已有操作逻辑，比如调用定位函数
    this.moveMapView();
  }
});

关键说明 #

1. 样式函数会在每次渲染时重新计算中点，确保文本始终处于线条中部，不受地图缩放、平移影响。
2. placement: 'point'配合geometry: new Point(midPoint)，让文本脱离LineString的线条绘制逻辑，改为固定在中点位置。
3. repeat: Infinity确保文本不会沿线条重复出现。
4. 点击检测通过forEachFeatureAtPixel实现，文本和线条都会触发Feature的点击判定，无需额外区分文本区域。

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