天地图Label文字居中

前端进阶者2025-07-25 15:05

在使用自定义Label的时候，我们有文字居中显示的需求，但是天地图4.0截止2025年3月26日，官方并没有提供api方式；

效果图

核心方法

typescript 复制代码

// 借用canvas获取文字宽度高度
function getTextSize(text: string, font: string) {
	// 创建一个 canvas 元素
	const canvas = document.createElement('canvas');
	// 获取其 2D 绘图上下文
	const context: any = canvas.getContext('2d');
	// 设定字体样式
	context.font = `${font}`;
	// 测量文本宽度和高度
	const metrics = context.measureText(text);
	// 文本宽度和高度
	const width = metrics.width;
	const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
	// 释放对 canvas 的引用，让垃圾回收机制可以回收它
	canvas.remove(); 
	return {textWidth: width, textHeight: height};
}

调用

typescript 复制代码

const {textWidth, textHeight} = methods.getTextSize('北京市小店区', 'normal 12px Arial');
const label= new T.Label({
	text: "北京市小店区",
	position: label.getLngLat(),
	/* textWidth/2: 宽度的一半
	   +10 是因为天地图默认样式是padding: 0 10;
	   -(textWidth / 2 + 10): 意思是向左偏移
	*/
	offset: new T.Point(-(textWidth / 2 + 10), -4)
});
// 自定义样式
label.setBackgroundColor('rgba(191, 224, 255, .11)');
label.setBorderColor('rgba(255, 255, 255, .2)');
label.setFontColor('#fff');
label.setFontSize(12);
// 追加到地图
map.addOverLay(label);