React应用中如何自定义Geoman工具的光标提示文本及多语言支持？

Geoman本身提供了内置的多语言配置机制，完全不需要通过querySelector操作DOM来修改提示文本，这种官方方案更稳定、易维护，具体实现步骤如下：

1. 定义自定义语言包 #

先创建包含需要修改的光标提示文本的语言对象，覆盖Geoman默认的提示字段（核心是tooltip下的各个工具提示项）：

const customLangPack = {
  // 中文语言包
  zh: {
    tooltip: {
      drawMarker: '点击地图添加标记点',
      drawPolygon: '点击绘制多边形顶点，双击结束绘制',
      drawPolyline: '点击绘制折线点，双击结束',
      edit: '点击要素开始编辑',
      remove: '点击要素删除',
      // 其他需要修改的工具提示都可以在这里定义
    }
  },
  // 英文语言包
  en: {
    tooltip: {
      drawMarker: 'Click to add marker',
      drawPolygon: 'Click to add vertices, double click to finish',
      drawPolyline: 'Click to add points, double click to finish',
      edit: 'Click feature to edit',
      remove: 'Click feature to remove',
    }
  }
};

2. 在React组件中配置Geoman语言 #

在React组件的地图初始化逻辑中（通常在useEffect钩子内），注册自定义语言包并设置默认语言：

import { useEffect, useRef } from 'react';
import L from 'leaflet';
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';

const GeomanMap = () => {
  const mapContainerRef = useRef(null);

  useEffect(() => {
    if (!mapContainerRef.current) return;

    // 初始化Leaflet地图
    const map = L.map(mapContainerRef.current).setView([39.9042, 116.4074], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    // 注册自定义语言包
    map.pm.addLang('zh', customLangPack.zh);
    map.pm.addLang('en', customLangPack.en);

    // 设置默认显示的语言
    map.pm.setLang('zh');

    // 语言切换函数（可绑定到组件内的按钮点击事件）
    const switchLanguage = (lang) => {
      map.pm.setLang(lang);
      // 切换后Geoman会自动更新所有工具的提示文本
    };

    // 清理函数：组件卸载时销毁地图
    return () => map.remove();
  }, []);

  return (
    <div>
      <button onClick={() => switchLanguage('zh')}>中文</button>
      <button onClick={() => switchLanguage('en')}>English</button>
      <div ref={mapContainerRef} style={{ height: '500px', marginTop: '10px' }} />
    </div>
  );
};

export default GeomanMap;

关键说明 #

• map.pm.addLang(langKey, langObject)：用于注册自定义语言包，langKey是语言标识（如zh/en），langObject是对应语言的提示文本集合
• map.pm.setLang(langKey)：切换语言时调用此方法，Geoman会自动替换所有工具的提示文本（包括光标悬浮时的tooltip）
• 完全不需要操作DOM元素，官方内置方案能适配Geoman的版本更新，避免DOM结构变化导致的失效问题

内容的提问来源于stack exchange，提问作者FE-P