mapbox圖層顯示多行文本

 1、圖層中顯示多行文本圖層的layout屬性中的text-field，代碼如下：

// 地圖加載
map.on('load',
function() {

    var data = {
        "geometry": {
            "type": "Point",
            "coordinates": [105.73242187500001, 33.423948439285304]
        },
        "type": "Feature",
        "properties": {
            "col1": "學史可以看成敗、鑑得失、知興替；",
            "col2": "學詩可以情飛揚、志高昂、人靈秀；",
            "col3": "學倫理可以知廉恥、懂榮辱、辨是非。",
        }
    }

    map.addSource('test_source', {
        type: "geojson",
        data: data
    });

    map.addLayer({
        "id": 'test_layer',
        "type": "symbol",
        "minzoom": 0,
        "maxzoom": 22,
        "source": 'test_source',
        "layout": {
            "text-field": ["format", ["get", "col1"], {
                "text-font": ["literal", ["Open Sans Regular"]],
                "text-color": '#FF0000',
                "font-scale": 0.8
            },
            "\n", {},
            ["get", "col2"], {
                "text-font": ["literal", ["DIN Offc Pro Italic"]],
                "text-color": '#000000',
                "font-scale": 0.8
            },
            "\n", {},
            ["get", "col3"], {
                "text-font": ["literal", ["Arial Unicode MS Regular"]],
                "text-color": '#0000FF',
                "font-scale": 0.8
            }],
            "text-size": 16,
            "text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
            "text-offset": [0, 0],
            "text-anchor": "left",
            "text-justify": "left",
            "text-max-width": 20,
            "text-allow-overlap": false,
        }
    });

});

2.顯示結果如下圖：