切换地图语言

更改地图的语言;
<!DOCTYPE html>
<html lang="en">
<head>
    <title>切换地图语言</title>
    <meta property="og:description" content="更改地图的语言" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
        .map-overlay {
            font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            position: absolute;
            width: 200px;
            top: 0;
            left: 0;
            padding: 10px;
        }
        .map-overlay .map-overlay-inner {
            background-color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            border-radius: 3px;
            padding: 10px;
            margin-bottom: 10px;
        }
        .map-overlay-inner fieldset {
            border: none;
            padding: 0;
            margin: 0 0 10px;
        }
        .map-overlay-inner fieldset:last-child {
            margin: 0;
        }
        .map-overlay-inner select {
            width: 100%;
        }
        .map-overlay-inner label {
            display: block;
            font-weight: bold;
            margin: 0 0 5px;
        }
        .map-overlay-inner button {
            display: inline-block;
            width: 36px;
            height: 20px;
            border: none;
            cursor: pointer;
        }
        .map-overlay-inner button:focus {
            outline: none;
        }
        .map-overlay-inner button:hover {
            box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay top">
    <div class="map-overlay-inner">
        <fieldset>
            <label>选择语言</label>
            <select id="language" name="language">
                <option value="ar">阿拉伯语</option>
                <option value="de">德语</option>
                <option value="en" selected>英语</option>
                <option value="es">西班牙语</option>
                <option value="fr">法语</option>
                <option value="it">意大利语</option>
                <option value="ja">日语</option>
                <option value="ko">韩语</option>
                <option value="mul">多语言</option>
                <option value="pt">葡萄牙语</option>
                <option value="ru">俄语</option>
                <option value="zh">中文</option>
            </select>
        </fieldset>
    </div>
</div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        center: [16.05, 48.15],
        zoom: 3,
    });

    const language = document.getElementById('language');

    function setLanguage(styleJson, lang) {
        // 从MapTiler后端获取特定语言的瓦片URL
        const tileLangUrl = 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=get_your_own_OpIi9ZULNHzrESv6T2vL&language=' + lang;
        const vectorTileLangUrl = 'https://api.maptiler.com/tiles/v3/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL&language=' + lang;

        // 更新栅格源和矢量源的URL
        styleJson.sources.maptiler_attribution.tiles = [tileLangUrl];
        styleJson.sources.openmaptiles.url = vectorTileLangUrl;

        // 设置标签和地名的字段前缀
        const langField = lang === 'mul' ? '' : '{name:latin}\n{name:nonlatin}';
        
        // 更新样式中的标签字段
        for (const layer of styleJson.layers) {
            if (layer.layout && layer.layout['text-field']) {
                layer.layout['text-field'] = langField;
            }
        }

        return styleJson;
    }

    language.addEventListener('change', function(e) {
        const lang = e.target.value;
        
        // 获取当前样式
        const style = map.getStyle();
        
        // 修改样式
        const newStyle = setLanguage(style, lang);
        
        // 设置样式
        map.setStyle(newStyle);
    });
</script>
</body>
</html>