openlayers - 如何在 Openlayers 6 中自动调整形状的字体？

Question

我使用 Openlayers 来绘制字符和形状。

我想根据形状的大小动态更改字符大小。

function setStyle(feature: RenderFeature | Feature<any>, resolution: number): void | Style | Style[] {
  const props: IProps = feature.getProperties()
  const options: IStyleOptions = this.styleOptions(props)
  // const area: number = feature.getGeometry().getArea()
  const fontSize: number = Math.floor(1 / resolution)
  const style: Style = new Style({
    fill: new Fill({
      color: options.fillColor
    }),
    stroke: new Stroke({
      color: options.strokeColor,
      width: 1
    }),
    text: new Text({
      font: `bold ${fontSize}px/1 Malgun Gothic`,
      text: options.text,
      overflow: true
    })
  })
  return style
}

这是上面代码的结果图像

Answer 1

不规则形状没有简单的解决方案，但如果您的形状是矩形，则需要考虑它们的宽度和高度，以及一行中的最大行数和字符数

  const width: number = getWidth(feature.getGeometry().getExtent())
  const height: number = getHeight(feature.getGeometry().getExtent())
  const fontSize: number = Math.min(width / (maxchars * resolution), height / (maxlines * resolution))