使用本地生成的表意文字

使用本地生成表意文字代替远程加载字体;

<!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 {
            position: absolute;
            bottom: 0;
            right: 0;
            background: #fff;
            margin-right: 20px;
            margin-bottom: 20px;
            padding: 10px;
            border-radius: 3px;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
        .option-container {
            margin-bottom: 10px;
        }
        label {
            cursor: pointer;
        }
        #restart-button {
            padding: 5px 10px;
            background: #4285F4;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        #restart-button:hover {
            background: #2a75f3;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay">
    <div class="option-container">
        <input type="radio" id="remote" name="ideograph-option" value="remote" checked>
        <label for="remote">远程字体（默认）</label>
    </div>
    <div class="option-container">
        <input type="radio" id="local" name="ideograph-option" value="local">
        <label for="local">本地生成（更快）</label>
    </div>
    <button id="restart-button">重新加载地图</button>
</div>
<script>
    // 使用localIdeographFontFamily选项可以绕过远程字体下载，
    // 从而提高处理中文、日文或韩文文本的地图性能。
    // 此选项使用浏览器的字体渲染功能来显示这些文字。

    // 初始化地图，默认使用远程字体
    let mapOptions = {
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        zoom: 2,
        center: [105, 31] // 将视图集中在中国
    };

    let map = new maplibregl.Map(mapOptions);

    // 根据用户选择设置表意文字渲染方式
    function setupMap() {
        // 清除现有地图
        if (map) {
            map.remove();
        }

        // 获取用户选择
        const useLocalFont = document.getElementById('local').checked;

        // 克隆基本地图选项
        const currentMapOptions = Object.assign({}, mapOptions);

        // 如果选择了本地字体，添加localIdeographFontFamily选项
        if (useLocalFont) {
            currentMapOptions.localIdeographFontFamily = "'Noto Sans', 'Noto Sans CJK SC', sans-serif";
        }

        // 创建新地图
        map = new maplibregl.Map(currentMapOptions);

        // 添加导航控件
        map.addControl(new maplibregl.NavigationControl());

        // 向地图添加信息性标记
        map.on('load', () => {
            // 添加使用的字体类型的指示
            const fontTypeMarker = new maplibregl.Marker({
                element: createInfoElement(useLocalFont ? "使用本地字体渲染" : "使用远程加载字体")
            })
            .setLngLat([105, 38])
            .addTo(map);

            // 添加解释说明
            const explanationMarker = new maplibregl.Marker({
                element: createInfoElement(useLocalFont ? 
                    "本地表意文字渲染使用您设备上的字体，加载更快但可能因设备而异。" : 
                    "远程字体确保一致的外观，但需要下载额外数据。")
            })
            .setLngLat([105, 25])
            .addTo(map);
        });
    }

    // 创建信息元素辅助函数
    function createInfoElement(text) {
        const el = document.createElement('div');
        el.className = 'info-element';
        el.style.backgroundColor = 'white';
        el.style.padding = '8px';
        el.style.borderRadius = '4px';
        el.style.boxShadow = '0 0 0 2px rgba(0,0,0,0.1)';
        el.style.fontFamily = 'Arial, sans-serif';
        el.style.fontSize = '12px';
        el.style.minWidth = '120px';
        el.style.textAlign = 'center';
        el.innerHTML = text;
        return el;
    }

    // 为重启按钮添加事件监听器
    document.getElementById('restart-button').addEventListener('click', setupMap);

    // 初始设置
    setupMap();
</script>
</body>
</html>