如何在 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
}

This is the resulting image of the code above

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))

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

How to auto-resize a shape's font in Openlayers 6?

openlayers

openlayers-6