openlayers 线要素标注

### OpenLayers 中线要素的标注方法

在OpenLayers中，对于线要素的标注可以通过创建`VectorLayer`层，并利用`StyleFunction`来定义特定样式的文本标签。下面展示了一个具体的实例，该实例展示了如何在线要素旁边添加自定义文本标注。

#### 创建线要素并设置样式

首先，需要构建一个包含几何对象（即LineString类型的特征）的数据源：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';
import LineString from 'ol/geom/LineString';
import Feature from 'ol/Feature';
import Style from 'ol/style/Style';
import Text from 'ol/style/Text';
import Stroke from 'ol/style/Stroke';

// 初始化地图视图
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({ source: new OSM() })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

// 定义一条折线及其坐标位置
const lineCoordinates = [[-111.8793678, 40.759734], [-111.894292, 40.76302]];
const lineGeometry = new LineString(lineCoordinates);

// 构建带有几何属性的要素
const lineFeature = new Feature({
  geometry: lineGeometry,
  name: "Sample Route", // 此处可以作为要显示的文字内容
});

接着，在上述基础上进一步配置用于渲染这些要素以及其对应文本说明的样式规则：

// 设置线的颜色和宽度
lineFeature.setStyle(new Style({
  stroke: new Stroke({
    color: '#ffcc33', width: 3
  }),
}));

// 添加文本标记到线路附近
lineFeature.getStyle().push(
  new Style({
    text: new Text({
      font: '12px Calibri,sans-serif',
      fill: new Fill({color: '#000'}),
      stroke: new Stroke({color: '#fff', width: 3}),
      offsetX: 10, offsetY: -10, // 调整偏移量使文字不覆盖线条本身
      rotation: Math.PI / 4,     // 可选参数：旋转角度适应方向变化
      textAlign: 'center',
      textBaseline: 'middle',
      text: lineFeature.get('name') || ''
    })
  })
);

最后一步就是把这些准备好的要素加入到向量图层中去，并将其添加至地图上：

// 将feature放入source内
const vectorSource = new VectorSource();
vectorSource.addFeatures([lineFeature]);

// 建立新的vector layer并将之前建立的source关联起来
const vectorLayer = new VectorLayer({
  source: vectorSource,
});

// 把这个新创建出来的layer加回到地图里头
map.addLayer(vectorLayer);

通过这种方式可以在OpenLayers的地图应用中轻松实现在指定路径旁附加描述性的文字信息[^1]。