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