How to display country names in Polygons？

[jinzhe]

I want to display the country name in the polygon, but the api does not seem to have a relevant method.

[vasturiano]

@jinzhe you have polygonLabel if you'd like to display any content in the tooltip on polygon hover. If you'd like to add permanently visible labels you can use the labels layer to add a label to each polygon, potentially at the centroid of each polygon.

[jinzhe]

After using label, it can be displayed, but Chinese cannot be displayed. Can you tell me how to use labelTypeface?

Such as using this

https://www.wjceo.com/lib/fonts/MicrosoftYaHei_Regular.json

import facetype from "./facetype";
...
       world.labelText('label')
       .labelSize(1.2)
       .labelDotRadius(0.4)
       .labelAltitude(0.01)
       .labelDotOrientation(d =>'top')
       .labelColor(d => "#FDCA69")
       .labelTypeFace(facetype)

But running error!

[vasturiano]

@jinzhe does this help? https://github.com/vasturiano/globe.gl/issues/26

[jinzhe]

Thank you, it has been resolved!

[dengsong666]

@jinzhe does this help? #26这有帮助吗？ #26 Hello, I am building my Nuxt3 project, I try this solution, assign the imported json value to labelTypeFace, received the following error, can you help me look at it?

globe__gl.js?v=216d8761:50316 Uncaught TypeError: Cannot read properties of undefined (reading 'yMax')
at createPaths (globe__gl.js?v=216d8761:50316:41)
at Font.generateShapes (globe__gl.js?v=216d8761:50306:19)
at new TextGeometry (globe__gl.js?v=216d8761:50280:27)
at updateObj (globe__gl.js?v=216d8761:52901:28)
at globe__gl.js?v=216d8761:31741:9
at Array.forEach (<anonymous>)
at updateObjs (globe__gl.js?v=216d8761:31737:11)
at viewDigest (globe__gl.js?v=216d8761:31722:3)
at threeDigest (globe__gl.js?v=216d8761:51003:10)
at Function.update11 (globe__gl.js?v=216d8761:52877:5)

This is my code

const globe = Globe().width(400).height(400)(ipVisual.value!)
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
.labelsData(visitor)
.labelLat((d: any) => d.lat)
.labelLng((d: any) => d.lon)
.labelText((d: any) => d.city)
.labelSize(() => 1)
.labelDotRadius(() => 1)
.labelColor(() => 'rgba(255, 165, 0, 0.75)')
.labelResolution(2)
.labelTypeFace(font)
.pointOfView({ lat: 34, lng: 108, altitude: 1 }, 500)