Hiển thị và tạo kiểu cho nhãn văn bản phong phú

Sử dụng biểu thức format để hiển thị nhãn quốc gia bằng cả tiếng Anh và ngôn ngữ địa phương.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Display and style rich text labels</title>
    <meta property="og:description" content="Use the format expression to display country labels in both English and in the local language." />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
    <script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
<script>
    trackasiagl.setRTLTextPlugin(
        'https://unpkg.com/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js'
    );

    const map = new trackasiagl.Map({
        container: 'map', // container id
        style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key', // stylesheet location
        center: {"lat":10.762622,"lng":106.660172}, // starting position
        zoom: 2 // starting zoom
    });

    map.on('load', () => {
        map.setLayoutProperty('country-label', 'text-field', [
            'format',
            ['get', 'name_en'],
            { 'font-scale': 1.2 },
            '\n',
            {},
            ['get', 'name'],
            {
                'font-scale': 0.8,
                'text-font': [
                    'literal',
                    ['DIN Offc Pro Italic', 'Arial Unicode MS Regular']
                ]
            }
        ]);
    });
</script>

</body>
</html>